Two methods to implement multi-picture image upload and preview by js front-end (recommended)

1. How to convert pictures into icon code

html code:

<div class="yanzRight">
	<input style="margin-top:5px;float: left;"  name="evidence" onchange="previewImage(this,5)" type="file"/>
	<span class="dui"  style="display: none;"></span>
</div>
	<div  style="margin-left:150px;clear:both; padding-top:15px;">
	<img src="" alt=""  height="200" width="200" style="display:none;"/>
</div>

js code

//Picture preview functionfunction previewImage(file,imgNum)
{
 var MAXWIDTH = 200; 
 var MAXHEIGHT = 200;
 var div = ('preview'+imgNum);
 if ( &amp;&amp; [0])
 {
   ='&lt;img id=imghead'+imgNum+'&gt;';
  var img = ('imghead'+imgNum+'');
   = function(){
  var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, , );
   = ;
   = ;
//    = +'px';
   = +'px';
  }
  var reader = new FileReader();
   = function(evt){ = ;}
  ([0]);
 }
 else //
 {
 var sFilter='filter:progid:(sizingMethod=scale,src="';
 ();
 var src = ().text;
  = '&lt;img id=imghead'+imgNum+'&gt;';
 var img = ('imghead2');
 ('').src = src;
 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, , );
 status =('rect:'++','++','++','+);
  = "&lt;div id=divhead"+imgNum+" style='width:"++"px;height:"++"px;margin-top:"++"px;"+sFilter+src+"\"'&gt;&lt;/div&gt;";
 }
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
 var param = {top:0, left:0, width:width, height:height};
 if( width&gt;maxWidth || height&gt;maxHeight )
 {
  rateWidth = width / maxWidth;
  rateHeight = height / maxHeight;

  if( rateWidth &gt; rateHeight )
  {
    = maxWidth;
    = (height / rateWidth);
  }else
  {
    = (width / rateHeight);
    = maxHeight;
  }
 }
  = ((maxWidth - ) / 2);
  = ((maxHeight - ) / 2);
 return param;
}

2. Another method of using js to select multiple images at a time to preview and display

&lt;html xmlns="http:///1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Test page&lt;/title&gt;
&lt;script type="text/javascript"&gt;
 //The following is used for the preview function of multiple pictures upload function setImagePreviews(avalue) {
  var docObj = ("doc");
  var dd = ("dd");
   = "";
  var fileList = ;
  for (var i = 0; i &lt; ; i++) {   

    += "&lt;div style='float:left' &gt; &lt;img id='img" + i + "' /&gt; &lt;/div&gt;";
   var imgObjPreview = ("img"+i); 
   if ( &amp;&amp; [i]) {
    //Under Firefox, set the img attribute directly     = 'block';
     = '150px';
     = '180px';
    // = [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     = "150px";
     = "180px";
    //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;
 }

&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div style="margin :0px auto; width:990px;"&gt;
&lt;input type="file" name="file"  multiple="multiple" style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" /&gt;
&lt;div  style=" width:990px;"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

The above two methods (recommended) for implementing the upload and preview of multiple pictures in the js front-end article are all the content I share with you. I hope you can give you a reference and I hope you can support me more.