使用JS实现多图片在前台展示，删除及上传的案例

有不少插件都能实现图片上传删除的功能，但是有时候我们需要有一些独特的样式，是插件所不能实现的，而且理解一些图片上传的原理也是件挺好的事情。

之前的项目就有这个需求，因为该项目是一个比较小的手机端的页面，想着再引进去一个插件也没必要，所以就自己写了个小demo，比较简陋，不足之处可以给点意见。

在页面上就使用input type='file’来访问相机或者本地图库

<div class="photoWrap">
	<div class="addImg" id="addImg">
		拍照按钮:
		<input type="file" name="pics" id="file" accept="image/*" multiple="multiple">
	</div>
</div>

JS思路

• 通过file[0].files获取到上传的文件的信息；
• 循环遍历出每一个文件的信息，并push到数组中；
• 删除时先找到页面中的图片将其删除，再将数组中的文件信息删除掉

图片回显页面代码

var formData = [];
$("#file").change(()=>{
	var file = $("#file")[0].files;
    //循环遍历出图片的dataurl并展示在页面上
    for (let i = 0; i < file.length; i++) {
    	//判断图片大小
        if(file[i].size/1024/1024>10){
        	alert("图片大小超出限制")
        }else{
        	readFileAsync(file[i]);
            formData.push(file[i]);
        }
	}
})

//封装图片加载韩式
var readFileAsync = (file) =>{
	var reader = new FileReader();
	reader.onload = function(){
		var path = this.result;
        var node = "<div><img class='' src='"+path+"'><div class='delete'>删除</div></div>";
        $("#addImg").before(node);
	}
	reader.readAsDataURL(file);
}

删除图片代码

$(".photoWrap").on("click",".delete",function(){
	var index = $(this).parent().index();
    formData.splice(index,1);
    $(this).parent().remove();
})

上传图片至后台

• new一个FormData，将数组中的内容存放到其中，下图中“pics”即为上传给后台的name属性；
• ajax：processData:false,
  contentType:false,两者需要写在请求里面，否则不会成功

上图是项目中上传照片的一段代码截的图，差不多上传图片也就是这个路数。