H5多图片上传

先展示效果

选择图片选择图片之后展示缩略图

---

遇到的问题

如一次性上传5张图片，之后手动删除1张，那么实际情况就变为展示4张图片，但是input[type='file']中的value 还是五张，上传与展示的情况不符对吧，所以本文就是解决这个问题的

一、思路

1、一个缩略图对应一个input【type=file】，input的fileList 赋值为当前缩略图对应的图片

2、删除操作的时候，同时删除对应的input

3、最后清空上传按钮input的值，否则一张图片上传了两边。

二、代码

1.前端页面

html部分

<div> 
   <span class="pic_looka"  >
     <input type='file' name="xx" style="display:none"  onchange="showLocalPic(this)">
     <div id="zhl_admin_img" onclick="chooseImg(this)"></div>
   </span>
</div>

2.js部分

代码如下（示例）：

/**点击上传，出发input[type=file]
*/
function chooseImg(obj){
		 $(obj).prev().click();
}

/*
 * 预览图片,并生成相应的input
*/
function showLocalPic(obj){
	function readAndPreview(file) {
		//定义一个input对象，并且赋值fileList
		const dt = new DataTransfer()
		dt.items.add(file);
		var newInput= $(obj).prop("outerHTML");
		var newInputObj=$(newInput)[0];
		newInputObj.files=dt.files 
		//判断文件类型
		if(file['type'] == 'image/jpg' || file['type'] == 'image/png' || file['type'] == 'image/jpeg' || file['type'] == 'image/gif'){
			var reader = new FileReader();
			reader.onload = function (e) {
					//图片缩略图展示
					var imgHtml="<span class='pic_look'><img  src='"+e.target.result+"' class='zhl_admin_update_imgtmp' data-original='"+e.target.result+"' style='width: 65px; height: 50px;'> <em id='delete_pic' onclick=\"deleteFileData(this)\"></em></span>";
					var imgHtmlObj = $(imgHtml);
					//添加input标签（已经赋值fileList）
					imgHtmlObj.append(newInputObj);
					$(obj).parent().before(imgHtmlObj);
					//viewer 可放大图片
					$("img").viewer('destroy').viewer({});
					}
				reader.readAsDataURL(file)
			} else{
					console.log("文件格式不支持，请重新选择！");
			}
		 }
		 if (obj.files) {
		    	  [].forEach.call(obj.files, readAndPreview);
		   }
		  //清除input[type='file']的值，要不然图片会重复
		 obj.files=new DataTransfer().files;
				
	}

---

最后

直接对form表单提交即可，不用再对图片数据进行处理