代码
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.1.3</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.1.26</version>
</dependency>
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多图片上传</title>
</head>
<body>
<form name="form" id="form" action="multipleImageUpload" method="post" enctype="multipart/form-data">
<input type="file" name="fileName" id="filename" accept="image/png, image/jpeg, image/jpg" multiple="multiple" onchange="checkImage(this)">
<input type="button" id="submitBtn" onclick="checkSubmit()" value="上传"/>
</form>
<div id="onLoadImage">
</div>
</body>
<script src="/webjars/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var curFiles = [];//文件数组，用来保存上传的文件信息
//检查上传的图片
function checkImage(obj) {
var files = obj.files;
console.log(files.length);
if(files){
if(files.length <= 3) {//把一次上传图片数限制在3张
for (var i = 0; i < files.length; i++) {
var item = files.item(i);
var size = item.size;
if (size / 1000 < 100) { //简易大小限制100K
curFiles.push(item);
}
else {
alert("第" + (i + 1) + "张图片过大");
}
}
}
else{
$("#filename").val("");
alert("一次最多上传3张图片");
}
}
else {
$("#filename").val("");
alert("请选择上传文件");
}
//去除文件名相同的情况（上传列表中多次出现同一个文件）
for (var i = 0; i < curFiles.length - 1; i++) {
for (var j = 1; j < curFiles.length; j++) {
if (i != j) {
if (curFiles[i].name == curFiles[j].name) {
curFiles.splice(j, 1)
}
}
}
}
//判断上传图片大小(100KB)
for(var i = 0; i < curFiles.length; i++){
var size = curFiles[i].size;
if(size/1000>100){
curFiles.splice(i, 1);
}
}
console.log(curFiles);
onLoadImage();
}
//预览图片
function onLoadImage() {
$("#onLoadImage").html("");
for(var i = 0; i < curFiles.length; i++){
(function(i){
var file = curFiles[i];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
$('#onLoadImage').append("<img src='"+reader.result+"'/><span><span>"+file.name+"</span><button id='"+i+"' onclick='del(this.id)'>删除</button></span><br>");
}
})(i)
}
}
//删除功能
function del(id) {
var name = $("#"+id).prev().text();
console.log(name);
curFiles = curFiles.filter(function(file) {
return file.name !== name;
});
console.log(curFiles);
onLoadImage();
}
//上传功能的实现
function checkSubmit() {
if(curFiles.length>0){
var formdata = new FormData($('#form')[0]);
for (var i = 0; i<curFiles.length; i++) {
formdata.append('uploadFiles', curFiles[i]);
}
console.log(formdata);
$.ajax({
url: 'multipleImageUpload',
type: 'post',
data: formdata,
processData: false,
contentType: false,
success: function(data) {
alert(data.length+"个上传结果");
for(var k in data){
var num=Number(k)+1;
alert("第"+num+"张上传结果："+data[k].result_msg);
if(data[k].hasOwnProperty("relativePath"))
alert("第"+num+"张相对路径："+data[k].relativePath);
}
},
error: function(err) {
alert("上传失败");
}
});
}
else{
alert("请选择文件后上传");
}
}
</script>
</html>
后台
@RequestMapping("/multipleImageUpload")
public List multipleImageUpload(@RequestParam("uploadFiles") MultipartFile[] files){
System.out.println("上传的图片数："+files.length);
List<Map<String,Object>> root=new ArrayList<Map<String,Object>>();
for (MultipartFile file : files) { //循环保存文件
Map<String,Object> result=new HashMap<String, Object>();//一个文件上传的结果
String result_msg="";//上传结果信息
if (file.getSize() / 1000 > 100){
result_msg="图片大小不能超过100KB";
}
else{
//判断上传文件格式
String fileType = file.getContentType();
if (fileType.equals("image/jpeg") || fileType.equals("image/png") || fileType.equals("image/jpeg")) {
// 要上传的目标文件存放的绝对路径
final String localPath="F:\\IDEAProject\\imageupload\\target\\classes\\static\\img";
//上传后保存的文件名(需要防止图片重名导致的文件覆盖)
//获取文件名
String fileName = file.getOriginalFilename();
//获取文件后缀名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
//重新生成文件名
fileName = UUID.randomUUID()+suffixName;
if (FileUtils.upload(file, localPath, fileName)) {
//文件存放的相对路径(一般存放在数据库用于img标签的src)
String relativePath="img/"+fileName;
result.put("relativePath",relativePath);//前端根据是否存在该字段来判断上传是否成功
result_msg="图片上传成功";
}
else{
result_msg="图片上传失败";
}
}
else{
result_msg="图片格式不正确";
}
}
result.put("result_msg",result_msg);
root.add(result);
}
String root_json=JSON.toJSONString(root);
System.out.println(root_json);
return root;
}
图片上传工具类
public class FileUtils {
/**
* @param file 文件
* @param path 文件存放路径
* @param fileName 保存的文件名
* @return
*/
public static boolean upload(MultipartFile file, String path, String fileName) {
//确定上传的文件名
String realPath = path + "\\" + fileName;
System.out.println("上传文件：" + realPath);
File dest = new File(realPath);
//判断文件父目录是否存在
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdir();
}
try {
//保存文件
file.transferTo(dest);
return true;
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
return false;
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
return false;
}
}
}
效果
过程说明:
- 选择3张图上传（其中一张大小不符合上传要求）
- 删除大小符合要求的两张图片的其中一张
- 点击上传
单图片上传+预览
Ajax单图片上传+预览
4699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
