JS upload image Preview

Picture pre-upload preview used in recent projects, compatible with IE6-9, FF
 

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"  > 
 <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  > 
 <  Body  > 
 <  Input Type  = File  Name  = "Doc"  ID  = "Doc"  Onchange  = "Javascript: setimagepreview ();"  > 
 <  P  > 
 <  Div  ID  = "Localimag" > <  IMG  ID  = "Preview"  Width  =-1  Height  =-1  Style  = "Diplay: none"   /> </  Div  > 
 </  P  > 
<  Script  >  
  Function  Setimagepreview (){
  VaR  Docobj  =  Document. getelementbyid (  "  Doc "  );

  VaR  Imgobjpreview  =  Document. getelementbyid (  "  Preview  "  );
  If (Docobj. Files  &&  Docobj. Files [  0  ]) {
  //  Set IMG attributes directly under Firefox  
  Imgobjpreview. style. Display  =   ' Block  '  ;
Imgobjpreview. style. Width  =   '  300px  '  ;
Imgobjpreview. style. Height  =   '  120px '  ;
  //  Imgobjpreview. src = docobj. Files [0]. getasdataurl ();  
  
  //  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;
  VaR  Localimagid  =  Document. getelementbyid (  "  Localimag  "  );
 //  The initial size must be set.  
  Localimagid. style. Width  =   "  300px  "  ;
Localimagid. style. Height  =   " 120px  "  ;
  //  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  > 
 </  Body > 
 </  Html  > 

 

Because there are multiple upload buttons in the project, you need to make some modifications to the online example.Code:

View code

 Function Setimagepreview (fileobj, previewobj, localimg ){
 VaR Docobj = Document. getelementbyid (fileobj );
 VaR Imgobjpreview = Document. getelementbyid (previewobj );
 If (Docobj. Files & docobj. Files [0]) {
 //  Set IMG attributes directly under Firefox  
 Imgobjpreview. style. Display = 'block ';
Imgobjpreview. style. width = '120px ';
Imgobjpreview. style. Height = '80px ';
 //  Imgobjpreview. src = docobj. Files [0]. getasdataurl ();  
 
 //  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;
 VaR Localimagid = Document. getelementbyid (localimg );
 //  The initial size must be set.  
 Localimagid. style. width = "120px ";
Localimagid. style. Height = "80px ";
 // 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 ;
}