This article describes the method of uploading image preview by js. Share it for your reference. The specific implementation method is as follows:
Copy the code as follows: function PreviewImage(imgFile)
{
var fileextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
fileextension=fileextension.toLowerCase();
If ((fileextension!='.jpg')&&(fileextension!='.gif')&&(fileextension!='.jpeg')&&(fileextension!='.png')&&(fileextension!='.bmp'))
{
alert("Sorry, the system only supports photos in standard formats. Please adjust the format and upload it again, thank you!");
imgFile.focus();
}
else
{
var path;
if(document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + path + "/")";//Use filter effect
}
else//FF
{
path = imgFile.files[0].getAsDataURL();
document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
// document.getElementById("img1").src = path;
}
}
}
Called:
Copy the code as follows: Upload the image: <input type="file" name="file"
style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
<div id="imgPreview">
</div>
The operation effect is shown in the figure below:
I hope this article will be helpful to everyone's JavaScript programming.