Ajax+formData异步文件上传
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax+formData异步文件上传相关的知识，希望对你有一定的参考价值。
前端jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>ajax文件上传</title>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">
function add(){
var formdata=new FormData($("#frm")[0]);
$.ajax({
type:‘post‘,
url:‘ajaxupload.do‘,
data:formdata,
dataType:‘json‘,
contentType:false,
processData:false,
success:function(data){
var result=data.result;
if(result==‘1‘){
alert(‘提交成功！‘);
}else{
alert(‘提交失败！‘);
}
},
error:function(){
alert(‘未知错误！‘);
}
});
}
</script>
</head>
<body>
<form method="post" id="frm">
<table>
<tr><td>标题:</td><td><input type="text" name="title" /></td></tr>
<tr><td>内容:</td><td><input type="text" name="content" /></td></tr>
<tr><td>附件一:</td><td><input type="file" name="ff" /></td></tr>
<tr><td>附件二:</td><td><input type="file" name="ff2" /></td></tr>
<tr><td colspan="2"><input type="button" onclick="add()" value="提交"></td></tr>
</table>
</form>
</body>
</html>
后端servlet java代码:
package servlet;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
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.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.json.JSONObject;
public class AjaxUploadServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
DiskFileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload upload=new ServletFileUpload(factory);
JSONObject js=new JSONObject();
String title="";
String content="";
try {
List<FileItem> items=upload.parseRequest(request);
for(FileItem item:items){
if(item.isFormField()){
//只能通过此形式获取普通表单域的值，上传文件，表单form的enctype="multipart/form-data"，是以二进制数据流提交数据的。所以没法用request.getParameter("name")来获取提交到后台的普通表单域值。
if("title".equals(item.getFieldName())){
title=item.getString("UTF-8");
}else if("content".equals(item.getFieldName())){
content=item.getString("UTF-8");
}
}else{
String fileName=item.getName();
System.out.println("上传的文件为:"+fileName);
String path=request.getRealPath("/upload");
File f=new File(path+"/"+UUID.randomUUID()+"-"+fileName);
item.write(f);
js.put("result", "1");
}
}
System.out.println("title:"+title+",content:"+content);
} catch (Exception e) {
e.printStackTrace();
}
out.write(js.toString());
}
}
以上是关于Ajax+formData异步文件上传的主要内容，如果未能解决你的问题，请参考以下文章
Ajax使用formdata异步上传文件，报错the request was rejected because no multipart boundary was found