一、ajax提交纯表单（不包含文件或二进制或非ASCII数据）
ajax提交表单绕了很久，遇到一些问题进行测试下以加深理解，测试使用浏览器49.0.2623.110 m，HTML使用HTML4标准。下文提到的ajax为原生javascript的ajax（脚本化HTTP），都是个人理解，如有错误还望被指正。关于AJAX，XMLHttpRequest，FormData等应该还有许多待深入的问题，还需要进一步学习，本文仅目前实践内容。
/* ajaxupload.jsp */
<%@pagecontentType="text/html; charset = utf-8" %>
<!DOCTYPEhtml>
<html>
<head>
<title>Asynchronous Javascript and XML</title>
</head>
<body>
请选择要上传的文件：<inputid="uploadItem"name=type="file">
<script>
vartest=functionx(){
elem=document.getElementById("uploadItem");
elem.addEventListener"change",function() {
item=).files[0];
varformData =newFormData();
formData.append"uploadItem"item);
varxhr =newXMLHttpRequestxhr.open"post""../upload";
//xhr.setRequestHeader("Content-Type","multipart/form-data");
send(formData)}}();
</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&&){
varres=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 @H_301_334@"text/javascript"> function sendForm(){ var oData = new (.formsnamedItem"fileinfo")); oData."CustomField""This is some extra data"; var oReq = new oReq."../upload"(oData)} </script> </head> <body> <form enctype="multipart/form-data" method="post" @H_301_334@"fileinfo"> <table> <tr> <td><label>Your email address:</label></td> <td><input @H_301_334@"email" autocomplete="on" autofocus name="userid" placeholder=required size="32" maxlength="64"/> </td> </tr> <tr> <td><label>Custom file label:"text" @H_301_334@"filelabel" size="12" @H_301_334@"32"/><br/> </td> </tr> <tr> <td><label>File to stash:"file" required/> </td> </tr> </table> </form> <div @H_301_334@"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 requestHttpServletResponse response) throws IOExceptionServletException { try { request.setCharacterEncoding("UTF-8"; boolean isMultipart = ServletFileUpload.isMultipartContent(request); if (isMultipart) { DiskFileItemFactory factory = new DiskFileItemFactory()ServletFileUpload upload = 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(System.out.println("name = " + name + " ; value = " + value)} } } } catch (Exception e) { e.printStackTrace()} PrintWriter out = null; try { out = response.getWriter()} } out.println("upload successed!"; }
3、 添加进度条
添加进度条HTML元素，并设置样式，为XMLHttpRequest添加onprogress事件，涉及e.lengthComputable，e.uploaded，e.total的使用。
/*进度条元素*/
<tr class="progress-display"> <td>上传进度：</td> <td><span @H_301_334@"progress-bar" @H_301_334@"progress-bar"><span @H_301_334@"progress-bar-after"></span></span></td> </tr>
/*进度条样式*/
progress-bar{ display:inline-block; background-color:honeydewwidth:100pxheight10position:relativeborder-radius: 2border0.5px solid gray} .progress-bar-aftercontent:""%:green:absoluteleft0}
/*XMLHttpRequest添加onprogress事件*/
onprogress = function(e){ if(e.lengthComputable){ querySelector".progress-bar-after"stylewidth = Math.round(* e.loaded/ e.total) + "%"} }
三、总结