This article mainly introduces how to preview uploaded images using js. It is of practical value to implement the preview function of uploaded images using custom functions and onchange methods, for more information about how to use js to preview uploaded images, see the following example. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
Function PreviewImage (imgFile)
{
Var filextension = imgFile. value. substring (imgFile. value. lastIndexOf ("."), imgFile. value. length );
Filextension = filextension. toLowerCase ();
If (filextension! Your '.jpg ') & (filextension! Using '.gif ') & (filextension! Using '.jpeg ') & (filextension! Using '.png ') & (filextension! Using '.bmp '))
{
Alert ("sorry, the system only supports photos in the standard format. 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 the filter effect
}
Else // FF
{
Path = imgFile. files [0]. getAsDataURL ();
Document. getElementById ("imgPreview"). innerHTML = "";
// Document. getElementById ("img1"). src = path;
}
}
}
Call:
The Code is as follows:
Upload images:Style = "width: 200px; height: 20px;" onchange = "PreviewImage (this)" id = "upload"/>
Shows the running effect:
I hope this article will help you design javascript programs.