使用方法

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