兼容所有浏览器的多图上传预览(原创)

使用方法

1.搭建一个图片上传的模块

<div class="item">
       <svg class="icon addImg" aria-hidden="true">
           <use xlink:href="#icon-tianjiatupian"></use>
       </svg>
       <input name="url" type="file" class="upload_input" onchange="preview(this)"/>
       <div class="preview"></div>
       <div class="click" onclick="loadImg(this)"></div>
       <div class="delete" onclick="deleteImg(this)">
         <svg class="icon" aria-hidden="true">
           <use xlink:href="#icon-shanchu4"></use>
         </svg>
       </div>
  </div>
 

2.写入图片预览js

function preview(file) {
   var prevDiv = $(file).parent().find('.preview');
   if (file.files && file.files[0]) {
     var reader = new FileReader();
     reader.onload = function(evt) {
       prevDiv.html('<img src="' + evt.target.result + '" />');
     }
     reader.readAsDataURL(file.files[0]);
   } else {//IE
     prevDiv.html('<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
   }
   $(file).parent().find('.delete').show();
 }
 

3.上面的图片展示不出来是因为我用的icon-font,也可以用自己的图片