原生态Ajax实现文件上传

最新推荐文章于 2024-08-20 10:07:57 发布

孔融不吃梨

最新推荐文章于 2024-08-20 10:07:57 发布

阅读量271

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javaEE

本文链接：https://blog.youkuaiyun.com/qq_38455564/article/details/82586943

javaEE 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用原生态Ajax技术实现文件的上传功能，包括页面的jsp代码和服务器端的处理逻辑，为开发者提供了一个纯Ajax文件上传的实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面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 createXHR(){
			var xhr;
			if (window.XMLHttpRequest)
			  {// code for IE7+, Firefox, Chrome, Opera, Safari
			  xhr=new XMLHttpRequest();
			  }
			else
			  {// code for IE6, IE5
			  xhr=new ActiveXObject("Microsoft.XMLHTTP");
			  }
			  return xhr;
		}
		//提交表单信息
		function upload(){
			var xhr=createXHR();
			xhr.open("post","<%=basePath%>UploadAction");
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4){
					if(xhr.status==200){
						if(xhr.responseText=="ok"){
							alert("图片上传成功！")
						}else{
							alert("error:"+xhr.responseText);
						}
					}
				}
			}
			var data=new FormData(document.getElementById("myform"));
			xhr.send(data);
		}
	</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());
		}
		
	}

}