Upload Picture preview before upload

Upload an image to preview the image. You can see what the image will look like after it is uploaded. This function is implemented using JS and then called in the change event of the fileupload control, in this way, when you use fileupload to select an image, the image will be automatically displayed. The function is simple but practical.

Preview image JSCode:

 

<SCRIPT type = "text/JavaScript"> Function  Setimagepreview (docobj, localimagid, imgobjpreview ){  If (Docobj. Files & docobj. Files [0 ]) {  // Set IMG attributes directly under Firefox Imgobjpreview. style. Display = 'block' ; Imgobjpreview. style. Width = '300px' ; Imgobjpreview. style. Height = '200px' ;  //  Firefox 7 and later versions cannot be obtained using the getasdataurl () method. Imgobjpreview. src = Window. url. createobjecturl (docobj. Files [0 ]);}  Else  {  // Use a filter in IE  Docobj. Select ();  VaR Imgsrc = Document. selection. createRange (). text;  //  The initial size must be set. Localimagid. style. width = "300px" ; Localimagid. style. Height = "200px" ;  //  Abnormal image capturing to prevent users from modifying suffixes to forge Images                  Try {Localimagid. style. Filter = "Progid: DXImageTransform. Microsoft. alphaimageloader (sizingmethod = scale )" ; Localimagid. Filters. 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>

 

 

 

The fileupload control and the image used to preview the image:

 

 

 <  Div  ID  = "Localimag"  Style  = "Width: 300px; Height: 200px"  >    <  IMG  ID  = "Preview"  ALT  = "Preview an image"  SRC  = "Http://www.cnblogs.com/Images/noImage.gif"  Width  = "300px"  Height  = "200px"   />  </  Div  >     < ASP: fileupload  ID  = "Picload"  Width  = "300px"  Runat  = "Server"  Onchange  = "Javascript: setimagepreview (this, localimag, PreView );"  >     </  ASP: fileupload  > 

 

The function is very simple, and the code is easy to understand. I believe you can understand it without too much nonsense. I feel like this.ArticleThere is really nothing to say. If you don't talk about it much, you should focus on the code.