HTML5 多图片上传（前端+后台详解）

1、参考jquery插件库

手机端实现多图片上传

2、修改代码

我发现他这里的代码仅仅只是显示出来了，对后台一点作用都没有，于是我对该代码进行了修改
注意：我这里用了vue.js，直接用可能有些地方会报错，请大家修改后使用

imgChange :function (obj1, obj2,id) {
	var id = id;
	//console.info(id);
	//获取点击的文本框
	var file = document.getElementById(id);
	//存放图片的父级元素
	var imgContainer = document.getElementById(obj1);
	//获取的图片文件
	var fileList = file.files;
	//文本框的父级元素
	var input = document.getElementById(obj2);
	var imgArr = [];
	//var imgUrlArr = [];
	//遍历获取到得图片文件
	for (var i = 0; i < fileList.length; i++) {
		var imgUrl = window.URL.createObjectURL(file.files[i]);
		//console.info(imgUrl);
		//回显图片
		var imgList = document.getElementsByClassName("z_addImg");
		imgArr.push(imgUrl);
		var img = document.createElement("img");
		img.setAttribute("src", imgArr[i]);
		img.setAttribute("id",id+"_"+(imgList.length+1));
		var imgAdd = document.createElement("div");
		imgAdd.setAttribute("class", "z_addImg");
		imgAdd.appendChild(img);
		imgContainer.appendChild(imgAdd);
		
		//下面的这段代码是我自己添加的，每添加一张图片就上传到服务器并给数据库插入一条记录
		//思路大概是把我们上传的图片转成base64的格式，然后把base64放进dealImage（）方法中进行压缩，因为有的图片可能很大，这个时候我们需要把图片压缩一下，不想压缩的就把dealImage（）方法删掉就好了。
		//把图片转成base64然后上传
		var base64 = "";
		var str = "";
		var dealImage = this.dealImage;
		var reader = new FileReader();
		reader.readAsDataURL(file.files[i]);
		reader.onload = function(){
			 base64 = this.result;
			 dealImage(base64, 500, useImg);
			 function useImg(base64) {
				str= base64;//这个就是我们最后需要的
				http({
					data: {
						encode:base64
					},
					url: 'projectFile/saveCheckPhoto',
					type: 'post',
					dataType: 'json',
					async: false,
					success: function(data) {
						
					}
				})
			 };
		 };
	};
	
	
	this.imgRemove();
	},
	// 压缩图片
dealImage :function (base64, w, callback) {
	var newImage = new Image();
	var quality = 0.6;    //压缩系数0-1之间
	newImage.src = base64;
	newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
	var imgWidth, imgHeight;
	newImage.onload = function () {
		imgWidth = this.width;
		imgHeight = this.height;
		var canvas = document.createElement("canvas");
		var ctx = canvas.getContext("2d");
		if (Math.max(imgWidth, imgHeight) > w) {
			if (imgWidth > imgHeight) {
				canvas.width = w;
				canvas.height = w * imgHeight / imgWidth;
			} else {
				canvas.height = w;
				canvas.width = w * imgWidth / imgHeight;
			}
		} else {
			canvas.width = imgWidth;
			canvas.height = imgHeight;
			quality = 0.6;
		}
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
		var base64 = canvas.toDataURL("image/*", quality); //压缩语句
		// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
		// while (base64.length / 1024 > 150) {
		// 	quality -= 0.01;
		// 	base64 = canvas.toDataURL("image/jpeg", quality);
		// }
		// 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
		// while (base64.length / 1024 < 50) {
		// 	quality += 0.001;
		// 	base64 = canvas.toDataURL("image/jpeg", quality);
		// }
		callback(base64);//必须通过回调函数返回，否则无法及时拿到该值
	}
},

//删除
imgRemove:function () {
	var projectId = getQueryString("projectId");
	var institutionsId = getQueryString("institutionsId");
	var imgList = document.getElementsByClassName("z_addImg");
	var mask = document.getElementsByClassName("z_mask")[0];
	var cancel = document.getElementsByClassName("z_cancel")[0];
	var sure = document.getElementsByClassName("z_sure")[0];
	for (var j = 0; j < imgList.length; j++) {
		imgList[j].index = j;
		imgList[j].onclick = function() {
			var t = this;
			mask.style.display = "block";
			cancel.onclick = function() {
				mask.style.display = "none";
			};
			sure.onclick = function() {
				mask.style.display = "none";
				t.style.display = "none";
				//在这里我进行了一个删除操作，把数据库和服务器上的图片给删掉
				//这个为该图片的id，用来区分具体为那个图片
				var imgId = $(t).find("img").attr("id");
				//这个是删除方法，同时删除服务器文件和数据库记录
				http({
					data: {
						originalName:imgId,
						projectId: projectId,
						institutionsId: institutionsId,
					},
					url: 'projectFile/deleteCheckPhoto',
					type: 'post',
					dataType: 'json',
					async: false,
					success: function(data) {
						
					}
				})
				
			};

		}
	};
}

3、添加的后台代码

后台代码仅供参考

这个是在yml中定义的，我定义的是D:/file下面。你也可以直接写死

	@Value("${store.dir}")
    private String storeDir;

public Result saveCheckPhoto(ProjectFile projectFile){
        Result result = new Result();
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
        String fileAdd = sdf.format(new Date());
        //图片名称是  当前日期    避免数据重复
        String fileName = fileAdd  + ".jpg";
        //这个步骤是把base64转成图片，并存在storeDir+"/checkPhoto/"+fileName这个目录下，这个storeDir是我们自己定义的，比如这个是D:/file
        Base64ToPicture.GenerateImage(projectFile.getEncode(),storeDir+"/checkPhoto/"+fileName);
        String url = "/res/file/get/" + "checkPhoto" + "/" + fileName;
        projectFile.setId(UUIDTool.createUUID());
        projectFile.setUrl(url);
        projectFile.setCreateTime(new Date());
        projectFile.setFileType("jpg");
        projectFile.setType("checkPhoto");
        projectFile.setName(fileName);
        projectFileMapper.insert(projectFile);
        result.setMessage("保存成功！");
        result.setCode(1);
        return result;
    }

在这里面有个Base64ToPicture方法，以及以后需要显示，这个时候大家可以去看我以前的写一篇文章
jSignature签名的用法，一文教会你（二）后台代码
这篇博文详细讲解了我们需要用到什么工具类以及怎么回显；

4、删除的后台代码

public Result deleteCheckPhoto(ProjectFile projectFile){
    Result result = new Result();
    String contentId = projectFile.getOriginalName().substring(0,32); 
    List<ProjectFile> list = projectFileMapper.queryCheckPhoto(projectFile);
    //这里是为了防止空指针
    if(list.size()>0){
        UploadUtil.delete(list.get(0).getUrl(),"D://ms_file");
        int count = projectFileMapper.deleteByPrimaryKey(list.get(0).getId());
    }
    
    result.setMessage("删除成功！");
    result.setCode(1);
    return result;
}

UploadUtil方法也在jSignature签名的用法，一文教会你（二）后台代码博文里。