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> </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属性值: