前端单按钮多图片压缩上传

最新推荐文章于 2024-06-03 16:48:54 发布

懵逼选手

最新推荐文章于 2024-06-03 16:48:54 发布

阅读量150

点赞数

分类专栏：图片上传

本文链接：https://blog.csdn.net/qq_36513313/article/details/107908333

版权

图片上传专栏收录该内容

2 篇文章 0 订阅

订阅专栏

预期效果图如下

在这里插入图片描述

前端页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<title>前端单传按钮多图片压缩上传</title>
<script src="<%=basePath%>/static/front/js/jquery-1.11.3.min.js"></script>
 
<style>
.btn {
	border-radius: 0px;
	font-weight: 100;
	cursor: pointer;
	display: inline-block;
	padding: 5px;
	font-size: 14px;
	font-family: '微软雅黑'
}
 
.btn-primary {
	color: #fff;
	text-shadow: 0 1px rgba(0, 0, 0, .1);
	background-image: -webkit-linear-gradient(top, #4d90fe 0, #4787ed 100%);
	background-image: -o-linear-gradient(top, #4d90fe 0, #4787ed 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#4d90fe),
		to(#4787ed));
	background-image: linear-gradient(to bottom, #4d90fe 0, #4787ed 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4d90fe',
		endColorstr='#ff4787ed', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	background-repeat: repeat-x;
	border: 1px solid #3079ed;
}
 
.btn-success {
	color: #fff;
	text-shadow: 0 1px rgba(0, 0, 0, .1);
	background-image: -webkit-linear-gradient(top, #35aa47 0, #35aa47 100%);
	background-image: -o-linear-gradient(top, #35aa47 0, #35aa47 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#35aa47),
		to(#35aa47));
	background-image: linear-gradient(to bottom, #35aa47 0, #35aa47 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff35aa47',
		endColorstr='#ff35aa47', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	background-repeat: repeat-x;
	border: 1px solid #359947;
}
 
.gallery .img-item {
	position: relative;
}
 
.gallery .img-item .delete {
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	color: #fff;
	background: rgba(0, 0, 0, 0.7);
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	top: 25px;
	right: 25px;
	cursor: pointer;
}
 
.img {
	width: 300px;
	margin: 20px;
}
</style>
</head>
 
<body>
	<div>
		<form id="formdata" method="post" enctype="multipart/form-data">
			<input type="text" id="test" name="test" value="hhhhhhh">
			<div id="upload" class="btn btn-primary">选择图片</div>
			<div class="btn btn-success" id="uploadImg">上传</div>
			<div class="gallery" id="gallery"></div>
		</form>
		<input id="file" type="file" multiple style="display: none">
	</div>
 
	<script>
		//创建数组保存图片
		var files = new Array();
		var id = 0;
		//选择图片按钮隐藏input[file]
		$("#upload").click(function() {
			$("#file").trigger("click");
		});
		//选择图片
		$("#file").change(function() {
			//获取所有图片
			var img = document.getElementById("file").files;
			//遍历
			for (var i = 0; i < img.length; i++) {
				//得到图片
				var file = img[i];
				//图片压缩
				var reader = new FileReader();
	            reader.readAsDataURL(file);
	            reader.onload = function(e) {
	                dealImage(this.result, { quality: 0.5 }, function(base) {
	                    //调用
	                    var blob = dataURLtoBlob(base);
	                    var newFile = new File([blob], file.name, { type: file.type });
	                  	//把图片存到数组中
	                    files[id] = newFile;
	                });
	            }
				//把图片存到数组中
				//files[id] = file;
				id++;
				//获取图片路径
				var url = URL.createObjectURL(file);
				//创建img
				var box = document.createElement("img");
				box.setAttribute("src", url);
				box.className = 'img';
				//创建div
				var imgBox = document.createElement("div");
				imgBox.style.display = 'inline-block';
				imgBox.className = 'img-item';
				//创建span
				var deleteIcon = document.createElement("span");
				deleteIcon.className = 'delete';
				deleteIcon.innerText = 'x';
				//把图片名绑定到data里面
				deleteIcon.id = img[i].name;
				//把img和span加入到div中
				imgBox.appendChild(deleteIcon);
				imgBox.appendChild(box);
				//获取id=gallery的div
				var body = document.getElementsByClassName("gallery")[0];
				body.appendChild(imgBox);
				//点击span事件
				$(deleteIcon).click(function() {
					//获取data中的图片名
					var filename = $(this).attr('id');
					//alert(filename);
					//删除父节点
					$(this).parent().remove();
					var fileList = Array.from(files);
					//遍历数组
					for (var j = 0; j < fileList.length; j++) {
						//通过图片名判断图片在数组中的位置然后删除
						//alert(fileList[j].name+"111");
						if (fileList[j].name == filename) {
							fileList.splice(j, 1);
							id--;
							break;
						}
					}
					files = fileList;
				});
			}
		});
		
		//上传功能
		$("#uploadImg").click(
			function() {
				//创建FormData根据form
				var uploadFile = new FormData($("#formdata")[0]);
				//遍历图片数组把图片添加到FormData中
				for (var i = 0; i < files.length; i++) {
					uploadFile.append("imgs", files[i]);
					//alert(files[i].name);
				}
				console.log(uploadFile);
				if ("undefined" != typeof (uploadFile) && uploadFile != null && uploadFile != "") {
					//通过ajax上传
					$.ajax({
						url : "<%=basePath%>release/uplocadImage.do",
						type : "post",
						data : uploadFile, //把FormData作为参数
						contentType : false, //不设置内容类型
						processData : false, //不处理数据
						success : function(data) {
							if (data) {
								alert("上传成功!");
								window.location.reload();
							} else {
								alert("上传失败!");
							}
						},
						error : function() {
							alert("上传失败！");
						}
					});
				}
			});
		
		
        //将base64转换为blob
        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }
		
		  /**
         * 图片压缩，默认同比例压缩
         * @param {Object} path
         * pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
         * @param {Object} obj
         * obj 对象 有 width， height， quality(0-1)
         * @param {Object} callback
         * 回调函数有一个参数，base64的字符串数据
         */
        function dealImage(path, obj, callback) {
            var img = new Image();
            img.src = path;
            img.onload = function() {
                var that = this;
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = obj.quality || 0.7; // 默认图片质量为0.7
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 图像质量
                if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                    quality = obj.quality;
                }
                // quality值越小，所绘制出的图像越模糊
                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 回调函数返回base64的值
                callback(base64);
            }
        }
	</script>
</body>
</html>

后台处理代码

//单按钮多图片上传
	@RequestMapping(value="/uplocadImage.do",method=RequestMethod.POST)
	@ResponseBody
	public boolean uploadImages(@RequestParam MultipartFile[] imgs,HttpServletRequest request){
		PageData pd = new PageData();
		pd = this.getPageData();
		System.out.println("pd:"+pd.getString("test"));
		System.out.println("request:"+request.getParameter("test"));
		System.out.println(imgs);
		System.out.println(imgs.length);
		for (int i = 0;i < imgs.length;i++) {
			//得到原图片名
			String oldName = imgs[i].getOriginalFilename();// 如apple1.jpg
			System.out.println(oldName);
			
			String  ffile = DateUtil.getDays();
			String filePath = PathUtil.getClasspath()+"release/BillingMessage/"+ffile;		//文件上传路径
			String fileName = FileUpload.fileUp(imgs[i], filePath, this.get32UUID());				//执行上传
			System.out.println("文件名"+fileName+"上传路径："+filePath);
			
		}
		
		return true;
	}


/**上传文件
	 * @param file 			//文件对象
	 * @param filePath		//上传路径
	 * @param fileName		//文件名
	 * @return  文件名
	 */
	public static String fileUp(MultipartFile file, String filePath, String fileName){
		String extName = ""; // 扩展名格式：
		try {
			if (file.getOriginalFilename().lastIndexOf(".") >= 0){
				extName = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
			}
			copyFile(file.getInputStream(), filePath, fileName+extName).replaceAll("-", "");
		} catch (IOException e) {
			System.out.println(e);
		}
		return fileName+extName;
	}

/**
	 * 写文件到当前目录的upload目录中
	 * @param in
	 * @param fileName
	 * @throws IOException
	 */
	private static String copyFile(InputStream in, String dir, String realName)
			throws IOException {
		File file = mkdirsmy(dir,realName);
		FileUtils.copyInputStreamToFile(in, file);
		return realName;
	}
	
	
	/**判断路径是否存在，否：创建此路径
	 * @param dir  文件路径
	 * @param realName  文件名
	 * @throws IOException 
	 */
	public static File mkdirsmy(String dir, String realName) throws IOException{
		File file = new File(dir, realName);
		if (!file.exists()) {
			if (!file.getParentFile().exists()) {
				file.getParentFile().mkdirs();
			}
			file.createNewFile();
		}
		return file;
	}


/**获取classpath1
	 * @return
	 */
	public static String getClasspath(){
		String path = (String.valueOf(Thread.currentThread().getContextClassLoader().getResource(""))+"../../").replaceAll("file:/", "").replaceAll("%20", " ").trim();	
		if(path.indexOf(":") != 1){
			path = File.separator + path;
		}
		return path;
	}