Ajax上传文件(原生js)，Java后台演式

最新推荐文章于 2021-07-06 15:08:11 发布

Cool Cool の橙

最新推荐文章于 2021-07-06 15:08:11 发布

阅读量239

点赞数 1

文章标签： web javascript

本文链接：https://blog.csdn.net/qq_37767415/article/details/114752492

版权

关键对象:

var formdata = new FormData();

话不多说,直接亮代码。

###java端代码:

package servlet;

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("/upload") //url路径映射 ,声明了这个注释就不用了在XML配置文件里配置映射路径了 (Tomcat 7.0以下无效)
@MultipartConfig //文件上传必须声明 (Servlet 3.0 以上)
public class UploadServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response); //转到POST请求
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Part file = request.getPart("file");
		String s = UUID.randomUUID().toString();//生成一个唯一的随机数
		file.write("D://"+s+".jpg");	 //输出到服务端 (这里就简单的写个绝对路径,想了解更多请持续关注我!)
	}
}

Servlet 3.0一般Tomcat7.0或7.0以上都有

###然后就是前端代码:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<!--可以不要form, 同时也可以不要enctype = "multipart/form-data" -->
		<input type="file" name="file"/>
		<input type="button" name="action" value="上传" onclick="getData()">
</body>
<script>
/*  主要代码 */
	function getData(){
		var file = document.getElementsByName("file");
		if(file[0].files[0]==undefined){ /*判断是否选择了文件*/
   			alert("请选择文件!");
   			return;
   		}
		var formdata = new FormData();/*Ajax文件上传必须对象*/
		formdata.append('file',file[0].files[0]);
		var xhr = new XMLHttpRequest();/*节省代码量就没写浏览器兼容,直接 new XMLHTTPRequest对象*/
		xhr.open("POST","./upload",true);
		xhr.send(formdata);
	}

</script>
</html>