一、ajax提交纯表单(不包含文件或二进制或非ASCII数据)
ajax提交表单绕了很久,遇到一些问题进行测试下以加深理解,测试使用浏览器 49.0.2623.110 m,HTML使用HTML4标准。下文提到的ajax为原生javascript的ajax(脚本化HTTP),都是个人理解,如有错误还望被指正。关于AJAX,XMLHttpRequest,FormData等应该还有许多待深入的问题,还需要进一步学习,本文仅目前实践内容。
二、ajax上传文件
1、 上传单个文件
/* ajaxupload.jsp */
<%@ page contentType="text/html; charset = utf-8" %>
<!DOCTYPE html>
<html>
<head>
<title>Asynchronous Javascript and XML</title>
</head>
<body>
请选择要上传的文件:<input id="uploadItem"name="uploadItem" type="file">
<script>
var test= function x(){
var elem= document.getElementById("uploadItem");
elem.addEventListener("change",function() {
var item= document.getElementById("uploadItem").files[0];
var formData = new FormData();
formData.append("uploadItem",item);
var xhr = new XMLHttpRequest();
xhr.open("post","../upload");
//xhr.setRequestHeader("Content-Type","multipart/form-data");
xhr.send(formData);
},false);
}();
</script>
</body>
</html>
/*upload */
public class upload extends HttpServlet{
public void doPost(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException {
try {
request.setCharacterEncoding("UTF-8");
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items = upload.parseRequest(request);
String fileName="";
File savefile ;
String apkPath = "D:/temp/";
for (FileItem item : items) {
if (!item.isFormField()) {
fileName = apkPath + item.getName();
System.out.println("fileName = " + fileName);
savefile = new File(fileName);
item.write(savefile);
}
}
}catch(Exception e){
e.printStackTrace();
}
PrintWriter out = null;
try {
out = response.getWriter();
}catch (Exception e){
e.printStackTrace();
}
out.println("upload successed!");
}
}
如下代码,定义一个type=file的input组件,监听变化后直接上传。
注意点:使用了FormData存储上传的文件。FormData对象介绍https://developer.mozilla.org/zh-CN/docs/Web/API/FormData,使用https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects。这是XMLHttpRequestlevel2中新引入的对象,XMLHttpRequest2见https://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/,这是2012年的草案。其兼容性可以在CanIUse网站http://caniuse.com/查询。相关对象的使用等最好查询比较专业的网站,而不是查询个人博客等,个人博客有的可能不是很好理解,并且不会实时随着对象变化来更新。
本人错误使用:设置了XMLHttpRequest的Content-Type为mutipart/form-data,这样导致错误“the request was rejected because no multipartboundary was found”,下面是浏览器中HTTP请求头信息,我们可以看到Content-Type中没有boundary(浏览器随机生成)。
下面是成功传送时候的HTTP请求信息。
本人使用过的文件上传插件Dropzone也是用FormData上传文件的,设置的请求头属性有Accecpt,Cache-Control,X-Requested-With,不包含Content-Type。从请求头中我们可以看到Content-Type是自动被设置为multipart/form-data的。从HTTP请求信息中我们还可以看到Request Payload,这是请求的有效荷载,也是一个值得讨论的问题,可以跟请求参数的Query String Parameter做下比较。
2、 提交表单,表单中携带文件
根据FormData的使用我们可以看到,将简单的键值对数据和文件数据放到FormData发送是很简单的一个问题,那么问题在哪里呢?问题在于后台如何取到普通的表单数据。同时可以指定回调函数
XMLHttpReq.onreadystatechange = callback; //指定回调函数
function callback(){
if(XMLHttpReq.readyState == 4&&XMLHttpReq.status == 200&&){
var res = XMLHttpReq.responseText; //返回文本,如果后台返回的是json字符串,如 {"flag":"success"}
//可以使用eval函数转成json
res=eval('('+res+')');
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>提交包含数据和文件的表单</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript"> function sendForm(){ var oData = new FormData(document.forms.namedItem("fileinfo")); oData.append("CustomField","This is some extra data"); var oReq = new XMLHttpRequest(); oReq.open("post","../upload",true); oReq.send(oData); } </script> </head> <body> <form enctype="multipart/form-data" method="post" name="fileinfo"> <table> <tr> <td><label>Your email address:</label></td> <td><input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64"/> </td> </tr> <tr> <td><label>Custom file label:</label></td> <td><input type="text" name="filelabel" size="12" maxlength="32"/><br/> </td> </tr> <tr> <td><label>File to stash:</label></td> <td><input type="file" name="file" required/> </td> </tr> </table> </form> <div id="output"></div> <a href="javascript:sendForm()">Stash the file!</a> </body> </html>
所有的数据都放在RequestPayload(原生AJAX使用)中,该如何转换呢?Request.getParameter应该只能得到get请求中Query String Parameters或者post请求Form Data请求体中的数据。http://blog.csdn.net/mhmyqn/article/details/25561535?utm_source=tuicool&utm_medium=referral这个博客讲了用最原始的输入流方法读取Request Payload中的数据,但是这要设置Content-Type 为application/x-www-form-urlencoded。最后,转了半天发现上传组件的parseRequest转化出来FileItem是包括fieldItem的(一开始以为只是file文件的信息被解析出来了),如果是表单域,java可以如下代码进行解析(参考网址http://www.blogjava.net/xyzroundo/articles/186217.html)
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { try { request.setCharacterEncoding("UTF-8"); boolean isMultipart = ServletFileUpload.isMultipartContent(request); if (isMultipart) { DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); List items = upload.parseRequest(request); //Process the uploaded items Iterator iter = items.iterator(); while(iter.hasNext()){ FileItem item = (FileItem)iter.next(); if(item.isFormField()){ String name =item.getFieldName(); String value = item.getString("UTF-8"); System.out.println("name = " + name + " ; value = " + value); } } } } catch (Exception e) { e.printStackTrace(); } PrintWriter out = null; try { out = response.getWriter(); } catch (Exception e) { e.printStackTrace(); } out.println("upload successed!"); }
3、 添加进度条
添加进度条HTML元素,并设置样式,为XMLHttpRequest添加onprogress事件,涉及e.lengthComputable,e.uploaded,e.total的使用。
/*进度条元素*/
<tr class="progress-display"> <td>上传进度:</td> <td><span id="progress-bar" class="progress-bar"><span class="progress-bar-after"></span></span></td> </tr>
/*进度条样式*/
.progress-bar{ display:inline-block; background-color:honeydew; width:100px; height:10px; position:relative; border-radius: 2px; border:0.5px solid gray; } .progress-bar-after{ content:""; width:0%; height:10px; background-color:green; position:absolute; left:0; }
/*XMLHttpRequest添加onprogress事件*/
oReq.onprogress = function(e){ if(e.lengthComputable){ document.querySelector(".progress-bar-after").style.width = Math.round(100* e.loaded/ e.total) + "%"; } }
三、总结
做完上述工作以后发现AJAX通过FormData上传文件是件挺简单的事情,不过应该考虑FormData的兼容性。