实现后端对Ajax的FormData对象所传文件的接收
ServletFileUpload的依赖库链接:
https://pan.baidu.com/s/14MfxOghnP-t1Q-sAQDh6kA
提取码:hcyc
前端FormData:
<form id="form1" method="post" enctype="multipart/form-data" action="" style=" width: 80%; margin:0 auto;">
<!-- form要设置 enctype="multipart/form-data",formdata识别标识 -->
<label >
<input type="file" id="test1" name="file" style="left:-10030px;position:absolute;">
<span>附件选择</span>
</label>
<!-- file input渲染 -->
</div>
<span id="filename" style="color:red"></span>
</div>
<!-- 文件名 -->
<button class="layui-btn" lay-submit lay-filter="formDemo" onclick="load()">发布</button>
<!-- 按钮 -->
</form>
<script type="text/javascript">
let input=document.getElementById("test1");
let span=document.getElementById("filename");
input.onblur=function(){
span.innerHTML=input.files[0].name;
<!-- 文件名获取赋值 -->
}
function load(){
let my;
let form=document.getElementById("form1");
let data=new FormData(form);
<!-- 将表单转为对象 -->
if(window.XMLHttpRequest){
my=new XMLHttpRequest();
}else{
try{
my=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
my=new ActiveXObject("Msxml12.XMLHTTP");
}
}
<!-- ajax -->
let pp=document.createElement("div");
pp.width="0%";
pp.height="15px";
pp.id="progress";
pp.innerHTML="0%";
pp.style="background:rgba(0,255,0,0.75);box-shadow:0px 0px 50px 0px #fff;border-radius:30px;padding-left:50%"
document.body.appendChild(pp);
<!-- 进度条 -->
let progress=document.getElementById("progress");
my.onreadystatechange=function(){
if(my.readyState==4&&my.status==200){
progress.width="100%";
progress.innerHTML="100%";
alert(my.responseText);
progress.remove();
}
};
<!-- 传输成功 -->
<!-- 上传中触发 -->
my.upload.onprogress=function(event){
if(event.lengthComputable){<!-- 文件长度是否可计算 -->
let x=(event.loaded/event.total)*100;<!-- 已上传大小/总大小 -->
let x2=Math.floor(x);<!-- 取整数 -->
progress.width=x2-1+"%";
progress.innerHTML=x2-1+"%";
}
}
my.upload.onload=function(){
<!-- 上传完成触发 -->
}
my.open('POST','/maven_web/upload',true);
<!-- FormData只能用POST方式 ,并且不能设置RequestHeader-->
if(confirm("你确定提交吗?")){
my.send(data);
}else{
progress.remove();
alert("提交已取消!");
}
}
</script>
后端处理:
package PCServlet;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Properties;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class A
*/
@WebServlet("/upload")
public class PCMessageReceiver extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String hasMultipart=""; //是否携带附件
File file=null;
FileItem fileitem=null;
String s=UUID.randomUUID().toString().replaceAll("-", "");
String UUID=s;
boolean bb=ServletFileUpload.isMultipartContent(request);
<!-- 判断是否有enctype="multipart/form-data" -->
if(bb) {
FileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload load=new ServletFileUpload(factory);
try {
List<FileItem> list=load.parseRequest(request);
<!-- 解析请求 -->
Iterator<FileItem> it=list.iterator();
while(it.hasNext()) {
FileItem item=it.next();
if(item.isFormField()) {
<!-- 判断是否是普通表单字段 -->
String fieldName=item.getFieldName();
<!-- 表单字段名 -->
switch(fieldName) {
case "title":title=item.getString("utf-8");break;
case "city":level=item.getString("utf-8");break;
case "class":classes.add(item.getString("utf-8"));break;
case "desc":area=item.getString("utf-8");break;
}
// System.out.println(item.getString("utf-8"));
<!-- 获取value值;必须附上utf-8编码,否则出现中文乱码 -->
}else {
if(!item.getName().isEmpty()) {<!-- 判断是否选择文件 -->
fileitem=item;
String name=item.getName();
<!-- 获取文件名(完整路径) -->
name=name.substring(name.lastIndexOf("/")+1);
hasMultipart=name;
InputStream in=PCMessageReceiver.class.getClassLoader().getResourceAsStream("properties/uploadPath.properties");
Properties p=new Properties();
p.load(in);
String path=(String)p.get("upload");
<!-- 文件保存路径 -->
name=name.substring(name.lastIndexOf("."));
file=new File(path,UUID+name);
}
}
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
try {if(fileitem!=null) {
fileitem.write(file);
<!-- 保存文件 -->
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
注意:只要使用FormData,那么就只能使用以上方式获取参数,即使没有上传文件