首页 | 1838 | 502 | 251 | 添加收藏 上一个 下一个
兼容所有浏览器的多图上传预览(原创)

使用方法


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,也可以用自己的图片