使用ajax请求上传多个或者多个附件
jsp页面
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<title>文件上传</title>
</head>
<body>
<h1>ajax异步上传文件</h1>
<input type="file" id="upload">
<button id="but"onclick="oneUpload()" >上传</button>-->
<h1>ajax异步多文件上传</h1>
<form id="fileForm">
<input type="file" name="files" multiple="multiple" >
<input type="file" name="files" multiple="multiple" >
<input type="button" id="btn_add_file" value="上传附件" onclick="upload_files()">
</form>
<script type="text/javascript">
//单文件上传
function oneUpload() {
var file = document.getElementById("upload").files[0];
var formData = new FormData();
formData.append("file", file);
$.ajax({
type: 'POST',
url: '${pageContext.request.contextPath}/oneUpload.do',
processData: false, //是否把上传的数据 处理为对象 默认为true
contentType: false, //避免让jquery 设置请求头有可能会破坏分隔符。 而使服务器不能正常解析文件
data:formData,
success: function (data) {
alert(data);
}
})
}
//多文件上传
function upload_files(){
var formData = new FormData($("#fileForm")[0]);
$.ajax({
type: 'POST',
url:'${pageContext.request.contextPath}/allUpload.do',
processData: false, //是否把上传的数据 处理为对象 默认为true
contentType: false, //避免让jquery 设置请求头有可能会破坏分隔符。 而使服务器不能正常解析文件
data:formData,
success: function (data) {
alert(data);
}
})
}
</script>
</body>
</html>
java后端代码
package com.zjn.controller;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@Controller
public class AjaxUpload {
/**
* 单文件上传
*
* @param file
* @param request
* @return
*/
@RequestMapping("/oneUpload")
@ResponseBody
public String oneUploadFile(MultipartFile file, HttpServletRequest request) {
String path = "D://图片/img/";
//String data = sft.format(new Date());
String fileName = file.getOriginalFilename();
String lastStr = fileName.substring(fileName.lastIndexOf("."));
if (".txt".equals(lastStr)) {
return "文件格式不正确";
}
;
File file1 = new File(path);
if (!file1.exists()) {
file1.mkdirs();
}
String newName = UUID.randomUUID().toString().replace("-", "") + fileName;
try {
file.transferTo(new File(file1, newName));
String url = path + "/" + newName;
System.out.println(url);
return url;
} catch (IOException e) {
e.printStackTrace();
}
//文件存储路径
return "error";
}
/**
* 多文件上传
*
* @param list
* @param request
* @return
*/
@RequestMapping("/allUpload")
@ResponseBody
public String allUploadFile(@RequestParam(value = "files") List<MultipartFile> list, HttpServletRequest request) {
System.out.println("list====="+list);
String path = "D://图片/allImg/";
for (MultipartFile file : list) {
String fileName = file.getOriginalFilename();
String lastStr = fileName.substring(fileName.lastIndexOf("."));
;
File file1 = new File(path);
if (!file1.exists()) {
file1.mkdirs();
}
String newName = UUID.randomUUID().toString().replace("-", "") + fileName;
try {
file.transferTo(new File(file1, newName));
String url = path+ "/" + newName;
System.out.println(url);
} catch (IOException e) {
e.printStackTrace();
}
}
//文件存储路径
return "success";
}
}
//pom.xml文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.cn</groupId>
<artifactId>upload</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.0.6.RELEASE</version>
</dependency>
<!-- <dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.2.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.2.3</version>
</dependency> -->
<!--文件上传下载所用的包============ -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<!-- jstl-api -->
<dependency>
<groupId>javax.servlet.jsp.jstl</groupId>
<artifactId>jstl-api</artifactId>
<version>1.2</version>
</dependency>
<!-- jstl-impl -->
<dependency>
<groupId>org.glassfish.web</groupId>
<artifactId>jstl-impl</artifactId>
<version>1.2</version>
</dependency>
<!-- 标签standard包 -->
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
<!-- 数据库配置 -->
<!--mybatis mysql-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.0.2</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.2.2</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.2.6</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.29</version>
</dependency>
<!-- jdbc驱动jar包 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>4.1.1.RELEASE</version>
</dependency>
<!-- 生成token需要的jar包 -->
<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
<version>3.8.2</version>
</dependency>
<!-- 企业微信-->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.2</version>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.5.2</version>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpcore</artifactId>
<version>4.4.5</version>
</dependency>
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.51</version>
</dependency>
</dependencies>
</project>
