This article mainly introduces the specific implementation of the image selected without refresh and preview. For more information, see
The Code is as follows:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script type = "text/javascript">
// Preview the local image
Function setImagePreview (fieldupload, image, imagediv ){
Var docObj = document. getElementById (fieldupload );
Var imgObjPreview = document. getElementById (image );
If (docObj. files & docObj. files [0]) {
// Set the img attribute directly under Firefox
ImgObjPreview. style. display = 'block ';
ImgObjPreview. style. width = '150px ';
ImgObjPreview. style. height = '150px ';
// ImgObjPreview. src = docObj. files [0]. getAsDataURL ();
// Firefox 7 or later versions cannot be obtained using the getAsDataURL () method.
ImgObjPreview. src = window. URL. createObjectURL (docObj. files [0]);
} Else {
// Use the filter in IE
DocObj. select ();
Var imgSrc = document. selection. createRange (). text;
Var localImagId = document. getElementById (imagediv );
// The initial size must be set.
LocalImagId. style. width = "150px ";
LocalImagId. style. height = "150px ";
// Capture Abnormal images to prevent users from modifying suffixes to forge Images
Try {
LocalImagId. style. filter = "progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = scale)"; localImagId. Fills. item ("DXImageTransform. Microsoft. AlphaImageLoader"). src = imgSrc;
} Catch (e ){
Alert ("the format of the image you uploaded is incorrect. Please select another one! ");
Return false;
}
ImgObjPreview. style. display = 'none ';
Document. selection. empty ();
}
Return true;
}
</Script>
</Head>
<Body>
<Div id = "localImag"> </div>
<Div>
<Input type = "file" onchange = "javascript: setImagePreview ('upload', 'preview', 'localimag');" id = "upload"/>
</Div>
</Body>
</Html>