jQuery版ajax实现文件上传

最新推荐文章于 2024-07-21 03:01:07 发布

孔融不吃梨

最新推荐文章于 2024-07-21 03:01:07 发布

阅读量896

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_38455564/article/details/82590473

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面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>My JSP 'index.jsp' starting page</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="<%=basePath %>js/jquery1.11.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("[value='提交']").click(upload);
		})
		
		function upload(){
			$.ajax({
				url:"<%=basePath%>UploadAction",
				//请求方式
				type:"post",
				//接收服务器返回的数据类型
				dataType:"text",
				//获取表单数据
				data:new FormData($("#myform")[0]),
				//禁止ajax设置编码方式
				contentType:false,
				//禁止ajax将数据类型转换为字符串
				processData:false,
				//请求成功执行回调函数
				success:function(obj){
					if(obj=="ok"){
						alert("文件上传成功");
						alert(xhr);
					}
				},
				//请求失败
				error:function(xhr,statustext){
					alert("error:"+xhr.status+":"+statustext);
				}
			})
		}
	</script>
  </head>
  
  <body>
    <form id="myform">
    	 用户名：<input type="text" name="username"/><br/>
   		 密码：<input type="password" name="password"/><br/>
   		 头像：<input type="file" name="file"/><br/>
    	<input type="button" value="提交"/>
    </form>
  </body>
</html>

服务器端代码：

package com.min.action;

import java.io.IOException;
import java.util.UUID;

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;
@WebServlet("/UploadAction")
@MultipartConfig
public class UploadAction extends HttpServlet {

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			String username=request.getParameter("username");
			String password=request.getParameter("password");
			System.out.println("用户名："+username+" 密码"+password);
			//获取上传的文件
			Part part=request.getPart("file");
			System.out.println("上传文件名："+part.getSubmittedFileName());
			//上传文件夹在服务器的绝对路径
			String path=request.getServletContext().getRealPath("/upload");
			//将上传的问价写入服务器文件夹中
			part.write(path+"/"+UUID.randomUUID().toString()+part.getSubmittedFileName().substring(part.getSubmittedFileName().lastIndexOf(".")));
			System.out.println("文件上传成功");
			response.getWriter().write("ok");
		} catch (Exception e) {
			e.printStackTrace();
			response.getWriter().write("上传失败"+e.getMessage());
		}
		
	}

}