ajaxupload.js java_Ajax上传文件(原生js)

关键对象:

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以上都有

然后就是前端代码:

pageEncoding="utf-8"%>

Insert title here

/* 主要代码 */

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);

}

下面就是代码运行效果:

GIF.gif

该注意的点,也在代码注释里说了

就送给大家一句话: 多学多练,勤能补拙 (小编很喜欢的一句话)