jq实现ajax文件上传

最新推荐文章于 2024-07-15 15:38:12 发布

Rum chen

最新推荐文章于 2024-07-15 15:38:12 发布

阅读量5.2k

点赞数 2

分类专栏： java web 文章标签： ajax ajax文件上传

本文链接：https://blog.csdn.net/Chen_RuiMin/article/details/89036787

版权

java web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

Rum chen

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jq实现ajax文件上传

想起用ajax来上传文件，主要还是最近的一个项目练习，我总觉得如果用表单submit提交，有不可避免的要进行跳转说真的，着实让人不爽，于是想到ajax请求方式来完成文件上传，下面开始代码、客户端<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&g...
复制链接

扫一扫

专栏目录