HTML5 FormData提交表单-HTML5文件上传-JavaServlet处理文件上传

记录一下,供大家参考供自己备用,

原生开发爱好,框架什么的都是浮云!

index.html : 测试环境 google chrome

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>标题</title>
</head>

<body>
	<input type = 'text' id="normal_stream" value="中文乱码不?" />
	<input type = 'file' id="binary_stream" accept = "image/jpg" multiple="multiple" />
	<input type = 'button' value="SUBMIT" onclick="save()" />
	<div id="show"></div>
	<script>
	//console.log(JSON.parse('{"a":"123"}'));
	function save(){
		var normal_stream = document.getElementById("normal_stream").value;
		var files = document.getElementById("binary_stream").files;
		var arg={
			url : 'test.action',
			data:{normalStream:normal_stream},
			progress:function(e){
				//展示进度条 e.loaded/e.total;
				console.log(e.loaded/e.total);
			},
			fail:function(e){
				//失败处理
				console.log("fail:"+e);
			},
			success:function(json){
				//成功处理
				console.log(json);
				document.getElementById("show").innerHTML=json.normal+"本地文件名: "+json.fileName;
			}
		};
		for(var i=0;i<files.length;i++)
			arg.data["file-"+i] = files[i];
		upload(arg);
	}
	function upload(arg){
		var form = new FormData();
		for(var key in arg.data)
			form.append(key+"",arg.data[key]);
		xhr = new XMLHttpRequest();
		xhr.open("POST", arg.url, true);
		xhr.upload.onprogress = arg.progress;
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status>=200&&xhr.status<300){
					//console.log(xhr.responseText);
					arg.success&&arg.success(JSON.parse(xhr.responseText));
				}else arg.fail&&arg.fail(xhr.status);
			}
		}
		xhr.send(form);
	}
	</script>
</body>
</html>

Myservlet.java:测试环境 Tomcat8

package com.test;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Collection;

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("/test.action")
@MultipartConfig
public class MyServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    public MyServlet() {
        super();
    }
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/plain;charset=utf-8");
		String normalStream = new String (request.getParameter("normalStream").getBytes("ISO8859-1"),"UTF-8"); //二进制流上传需要转码
		normalStream = org.apache.commons.lang.StringEscapeUtils.escapeHtml(normalStream);//字符实体化 依赖commons-lang-2.6.jar
		String echoFileName="";
		
		File file=null;
		String path = getServletContext().getRealPath(".")+File.separator+"upload"+File.separator;//获取网络路径
		file = new File(path);
		if(!file.exists())file.mkdirs();
		Collection<Part> parts = request.getParts(); //谨防多文件上传
		System.out.println(parts.size());
		
		
		String fileName;
		InputStream fin = null;
		OutputStream fout = null;
		for(Part p : parts){
			fileName = p.getSubmittedFileName();//获取客户端文件名 , 就用这个文件名
			if(null == fileName)continue;
			echoFileName+=(echoFileName.isEmpty()?fileName:","+fileName);
			fin = p.getInputStream();
			file = new File(path+fileName);
			
			if(!file.exists())file.createNewFile();
			fout = new FileOutputStream(file);
			int x;
			while((x = fin.read())!=-1) 
				fout.write(x);
			fout.flush();
			fin.close();fout.close();
		}
		
		response.getWriter().append("{\"normal\":\""+normalStream+"\",\"fileName\":\""+echoFileName+"\"}");
		response.getWriter().flush();
	}

}

HTML5 FormData提交表单-HTML5文件上传-JavaServlet处理文件上传

猜你喜欢