文件上传 FileReader()

学习网址

兼容性

FileReader实现点击图片上传新图片的功能：

HTML：

<!-- action后添加接口路径 -->
<form id="infoForm" action="url" method="post" enctype="multipart/form-data">
  <!-- 图片上传隐藏信息 -->
  <!-- accept="audio/*|video/*|image/*|MIME_type 规定多接受的文件" -->
  <input type="file" accept="image/*" prev-target="#goodsPic" id="goodsPreview" style="display:none"/>
  <input type="file" accept="image/*" prev-target="#goodsCarouselImg1" id="loop1" style="display:none"/>
  <input type="file" accept="image/*" prev-target="#goodsCarouselImg2" id="loop2" style="display:none"/>
  <input type="file" accept="image/*" prev-target="#goodsCarouselImg3" id="loop3" style="display:none"/>
  <ul>
    <li>
      <label for="goodsName">商品名称</label>
      <input id="goodsName" type="text" placeholder="请输入商品名称"/>
    </li>
    <li>
      <label for="goodsNum">商品编号</label>
      <input id="goodsNum" type="text" placeholder="请输入商品编号"/>
    </li>
    <li>
      <label for="goodsPrice">商品价格</label>
      <input id="goodsPrice" type="text" placeholder="请输入商品价格"/>
    </li>
    <li class="goodsList">
      <label>商品主图</label>
      <img src="img/goods1.png" file-target="#goodsPreview" id="goodsPic" alt="商品主图"/>
    </li>
    <li class="goodsList">
      <label>商品轮播图</label>
      <img src="img/goods1.png" file-target="#loop1" id="goodsCarouselImg1" alt="商品轮播图1"/>
      <img src="img/goods1.png" file-target="#loop2" id="goodsCarouselImg2" alt="商品轮播图2"/>
      <img src="img/goods1.png" file-target="#loop3" id="goodsCarouselImg3" alt="商品轮播图3"/>
    </li>
    <li><label>&nbsp;</label><input name="" type="button" id="subBtn" class="btn" value="提交信息"/></li>
  </ul>
</form>

JS：

 $("#goodsPic,#goodsCarouselImg1,#goodsCarouselImg2,#goodsCarouselImg3").click(function(){
    $($(this).attr("file-target")).click();
  });
  $("[type=file]").on("change",function(){
    var preview = $($(this).attr("prev-target"));
    var reader = new FileReader();
    reader.onload = function(e){
      var avatorFile = e.target.result;
      if(!avatorFile){
        alert("您的浏览器不支持预览功能");
        return;
      }
      preview.attr("src",avatorFile);
    }
    reader.readAsDataURL(this.files[0]);
  })

文件上传注意：

在使用表单时，应该注意正确使用form的属性。

form属性值：