您的位置：首页 > Web前端 > HTML5

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

2017-01-11 00:49 507 查看

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

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

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

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航