Showing an image before it is uploaded is a useful feature that allows users to preview the image they have selected before uploading it to the server. This feature can be implemented in different ways, but the most common approach is to use JavaScript and the FileReader API.
Example :1
<html>
<head>
<title>
show image before upload</title>
<script>
function showimage(ele)
{
document.ims.show.src=ele.value;
}
</script>
</head>
<body>
<form name="ims" method="POST">
<input type="file" name="image" onChange = "return showimage(this)">
<input type="submit">
<img id="show">
</form>
</body>
</html>In this example, the script uses the onChange event of the file input element to call the “showimage” function. The function then assigns the value of the file input element to the “src” attribute of an image element, which is used to display the preview.
Example : 2
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=javascript>
function ImageArray(file, img) {
var thisImage = new Image();
thisImage.src = file.value;
document.images[img].src=thisImage.src;
document.images[img].onload=function() {alert('path = '+
document.images[img].src+
'\nimage width = '+document.images[img].width+'px'+
'\nimage height = '+document.images[img].height+'px')};
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<p>
<input name="myFile" type="file" onchange="ImageArray(myFile,'img1')">
<img id="img1" name="img1" src="">
</form>
</body>
</html>In this example, the script uses the onchange event of the file input element to call the “ImageArray” function. The function creates a new image element, assigns the value of the file input element to the “src” attribute of the image element, and then uses the “onload” event of the image element to display the preview and some information about the image.
Example :3
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>In this example, the script uses the onchange event of the file input element to call the “handleFileSelect” function. The function uses the FileReader API to read the selected image files and then renders thumbnails of the images using the “createElement” and “insertBefore” methods of the DOM. The script also uses the “match” method of the file type property to ensure that only image files are processed.
These examples show different ways of implementing the feature of showing an image before it is uploaded. They all use the onchange event of the file input element and the JavaScript FileReader API to display the preview. The third example also uses the FileList object and the “match” method of the file type property to ensure that only image files are processed.
It is important to note that the FileReader API is supported in modern browsers and may not be available in older browsers. In such cases, a fallback solution such as using a server-side script to generate the preview may be required.
In summary, showing an image before it is uploaded is a useful feature that allows users to preview the image they have selected before uploading it to the server. It can be implemented in different ways, but the most common approach is to use JavaScript and the FileReader API. The examples above demonstrate different ways of implementing this feature, but it is important to consider browser compatibility and provide a fallback solution if necessary.
