JS多图预览、删除、上传（详细）

最新推荐文章于 2024-07-24 00:06:32 发布

卜先生丷

最新推荐文章于 2024-07-24 00:06:32 发布

阅读量7.6k

点赞数 5

分类专栏： Jquery JavaScript

JavaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Jquery

1 篇文章 0 订阅

订阅专栏

JS多图上传相比大家都会
但是上传到网页预览的时候，可能会进行筛选，删除一部分
操作file文件想必大家很少有试过吧
下面来说一下完整的实现方法

这里使用的是 formdata 的方式通过ajax来上传图片

前端代码

<%@ 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">

<html>
<head>
<title>影像上传</title>
<script src="js/jquery-1.3.2.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">
			<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];
				//把图片存到数组中
				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);
					}
					if ("undefined" != typeof (uploadFile) && uploadFile != null && uploadFile != "") {
						//通过ajax上传
						$.ajax({
							url : basePath + "/uplocadImages/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("上传失败！");
							}
						});
					}
				});
	</script>
</body>
</html>

后端代码

//上传功能
@RequestMapping(value="/uplocadImage.do",method=RequestMethod.POST)
@ResponseBody
public boolean uploadImages(@RequestParam MultipartFile[] imgs){
	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);
	}
	return true;
}