jq实现ajax文件上传

想起用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

发布了40 篇原创文章 · 获赞 11 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/Chen_RuiMin/article/details/89036787
今日推荐