SoFunction
Updated on 2025-02-28

Use file tags to achieve preview of multi-picture files

js code:

<script> 
 //The following is used for the preview function of multiple pictures upload function setImagePreviews(avalue) {
 var docObj = ("files");
 var dd = ("preview");
  = "";
 var fileList = ;
 for (var i = 0; i < ; i++) {
  += "<div style='float:left' > <img id='img" + i + "' /> </div>";
 var imgObjPreview = ("img"+i);
 if ( && [i]) {
 //Under Firefox, set the img attribute directly  = 'block';
 //Control the thumbnail size  = '70px';
  = '70px';
 // = [0].getAsDataURL();
 //The Firefox 7 or above cannot be obtained using the getAsDataURL() method above, and the following method is required  = ([i]);
 }
 else {
 //Use filters under IE ();
 var imgSrc = ().text;
 alert(imgSrc)
 var localImagId = ("img" + i);
 //The initial size must be set  = "70px";
  = "70px";
 //Catch the image exception to prevent users from modifying the suffix to forge pictures try {
   = "progid:(sizingMethod=scale)";
  ("").src = imgSrc;
 }
 catch (e) {
  alert("The image you uploaded is incorrect, please re-select!");
  return false;
 }
  = 'none';
 ();
 }
 }
 return true;
 }
 </script>

HTML code:

<form method="post" enctype="multipart/form-data"> 
 <input type="file" accept="image/png,image/gif,image/jpg,image/jpeg"  name="files" multiple onchange="javascript:setImagePreviews();" />
 <input type="button"  value="Upload" />
 <div > 
 </div> 
</form>

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!