js method to implement uploaded image preview_javascript skills

The example in this article describes how to implement uploaded image preview using js. Share it with everyone for your reference. The specific implementation method is as follows:

Copy code The code is as follows:

function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
Filextension=filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp' ))
{
alert("Sorry, the system only supports photos in standard formats, please adjust the format and re-upload, 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 effects
}
else//FF
{
Path = imgFile.files[0].getAsDataURL();
Document.getElementById("imgPreview").innerHTML = "";
// document.getElementById("img1").src = path;
}
}
}

Call:

Copy code The code is as follows:

Upload image: style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />

The operation effect is as shown below:

I hope this article will be helpful to everyone’s JavaScript programming design.