想起用ajax来上传文件,主要还是最近的一个项目练习,我总觉得如果用表单submit提交,有不可避免的要进行跳转
说真的,着实让人不爽,于是想到ajax请求方式来完成文件上传,下面开始代码、
客户端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
</head>
<body>
<form id="myform">
<input type="file" name="file" id="photo"/>
<button id="btn" type="button">提交</button>
</form>
</body>
<script>
$(document).ready(
$("#btn").click(
function(){
$.ajax({
type: 'post',
url: "FileUpload",
data: new FormData($("#myform")[0]),
cache: false,
processData: false,
contentType: false,
success: function(data){
alert(data);
}
})
}
)
)
</script>
</html>
web服务器端
这里主要是依靠servlet3其中的part组件来完成文件上传任务
package com.web.servlet;
import java.io.File;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
/**
* Servlet implementation class FileUpload
*/
@WebServlet("/FileUpload")
//使用注解@MultipartConfig将一个Servlet标识为支持文件上传
@MultipartConfig//标识Servlet支持文件上传
public class FileUpload extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//存储路径
String savePath = request.getServletContext().getRealPath("/uploadFile");
Part part = request.getPart("file");
//获取请求头,请求头的格式:form-data; name="file"; filename="snmp4j--api.zip"
String header = part.getHeader("content-disposition");
//获取文件名
String fileName = getFileName(header);
//获取文件类型
part.write(savePath+File.separator+fileName);
response.getWriter().write(savePath+File.separator+fileName);
System.out.println(savePath+File.separator+fileName);
}
public String getFileName(String header) {
/**
* String[] tempArr1 = header.split(";");代码执行完之后,在不同的浏览器下,tempArr1数组里面的内容稍有区别
* 火狐或者google浏览器下:tempArr1={form-data,name="file",filename="snmp4j--api.zip"}
* IE浏览器下:tempArr1={form-data,name="file",filename="E:\snmp4j--api.zip"}
*/
String[] tempArr1 = header.split(";");
/**
*火狐或者google浏览器下:tempArr2={filename,"snmp4j--api.zip"}
*IE浏览器下:tempArr2={filename,"E:\snmp4j--api.zip"}
*/
String[] tempArr2 = tempArr1[2].split("=");
//获取文件名,兼容各种浏览器的写法
String fileName = tempArr2[1].substring(tempArr2[1].lastIndexOf("\\")+1).replaceAll("\"", "");
return fileName;
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
最后完美呈现,客户端接受到服务器文件上传的路径的回应
附上完整的demo链接:FileUpload