Ajax利用FormData提交文件和数据

前端之家收集整理的这篇文章主要介绍了Ajax利用FormData提交文件和数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、ajax提交纯表单(不包含文件或二进制或非ASCII数据)

ajax提交表单绕了很久,遇到一些问题进行测试下以加深理解,测试使用浏览器49.0.2623.110 mHTML使用HTML4标准。下文提到的ajax为原生javascript的ajax(脚本化HTTP),都是个人理解,如有错误还望被指正。关于AJAX,XMLHttpRequest,FormData等应该还有许多待深入的问题,还需要进一步学习,本文仅目前实践内容

二、ajax上传文件

1、 上传单个文件

/* 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];
var
formData =newFormData();
formData.append"uploadItem"item);

var
xhr =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 "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" "fileinfo">
 <table>
 <tr>
 <td><label>Your email address:</label></td>
 <td><input "email" autocomplete="on" autofocus name="userid" placeholder=required size="32"
 maxlength="64"/>
 </td>
 </tr>
 <tr>
 <td><label>Custom file label:"text" "filelabel" size="12" "32"/><br/>
 </td>
 </tr>
 <tr>
 <td><label>File to stash:"file" required/>
 </td>
 </tr>
 </table>
</form>
<div "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 "progress-bar" "progress-bar"><span "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) + "%"}
}

三、总结

做完上述工作以后发现AJAX通过FormData上传文件是件挺简单的事情,不过应该考虑FormData的兼容性。

猜你在找的Ajax相关文章