在上一篇文章中，我介绍了本文中的背景Servlet。所以这里我们只看前台的JS代码。

首先，HTML5用AJAX提交数据。首先，它需要学习HTML5新增加的一个对象：FormData。

FormData对象可以使用append方法添加键值数据。与之前常用的json不同，它可以异步上传二进制文件。

1.创建FormDate对象。

var formData=new formData()；2.向FormDate对象添加数据。

FormData.append('catname '，'我是喵喵')；formData.append('age '，1)；//数字类型将转换为字符串类型。//可以添加上传的二进制文件。例如，文件输入远程对象已经包含用户选择的文件formdata.append ('userfile '，file inputrement . files[0])；//还可以向formData添加Blob对象。var ofile body=' a id=' a' b id=' b '嘿！/a '；var oBlob=new Blob([oFileBody]，{ type : ' text/XML ' })；formData.append('webmasterfile '，ObLob)；3.使用FormData对象。

var xhr=new XMLHttpRequest()；xhr.open('POST '，' upload ')；xhr . send(formData)；HTML部分

在简单介绍了FormData对象之后，让我们来看看页面的HTML代码是如何编写的。

img width=' 400 ' height=' 250 '/Br/input type=' file ' id=' pic ' name=' pic ' on change=' show pic()'/input type=' button ' value=' upload picture ' on click=' upload file()'/Br/div id=' parent ' div id=' son '/div/div底部的div用于显示进度条，因此需要对应的css样式。风格如下。颜色不好看。自己改。

style type=' text/CSS ' # parent { width :550 px；height:10pxborder:2px实心# 09F} # son { width:0高度：100%；背景色-: # 09F；文本对齐：居中；线高：10 px；font-size :20 px；font-weight : bold；} /styleJS部分。

好戏来了。在页面上加载jquery后，让我们看看JavaScript是如何编写的。首先，文件组件的onchange事件方法：

函数showPic(){ var pic=$('#pic ')。获取(0)。文件[0]；$('img ')。道具(' src '，窗口。URL . createobjecturl(pic))；}showPic的第一行是从file对象获取上传的文件。在第二行中，为img设置了src属性。您可以在页面上获得即时预览。

在查看uploadFile方法之前，让我们简单研究一下Progress Events的进度。

进度事件规范是W3C的工作草案，它定义了与客户机-服务器通信相关的事件。这些事件的实际值原本是针对XHR运营的，但目前其他API也在借鉴。下面有6个进度事件。

Loadstart:当接收到相应数据的第一个字节时触发。进度：在相应的接收周期内连续触发。//我们只看一个错误：当请求中出现错误时触发。中止：通过调用中止()方法终止链接时触发。加载：收到完整的对应数据时触发。Loadend:在通信完成或触发错误、中止或加载事件后触发。

进度事件由Mozilla提交，在浏览器接收新数据期间定期触发。Onprogress事件处理程序将接收一个目标属性为XHR对象的事件对象，但它包含三个附加属性：

LengthComputable:布尔值，指示进度信息是否可用。

位置：指示已接收的字节数。

TotalSize:表示根据Content-Length的对应头确定的预期字节数。

有了这些信息，我们可以为用户创建一个进度指示器。但问题来了。jQuery的ajax方法对进度事件没有操作。怎么在这里玩~ ~

好在通过查阅资料，发现jQuery的ajax方法调用的XMLHttpRequest对象是可以指定的！

看第8453行，就是这样。所以当uploadFile文件方法的ajax部分时，代码就变成了这种风格。

代码中最重要的部分：

函数uploadFile(){//获取上传文件，放到表单数据对象里面var pic=$('#myhead ').获取(0)。文件[0];var formData=new formData()；formData.append('file '，pic)；$.ajax({type: 'POST '，url: 'upload '，data: formData，//这里上传的数据使用了表单数据对象processData : false，//必须错误的才会自动加上正确的内容类型内容类型：假，//这里我们先拿到jQuery产生的XMLHttpRequest对象，为其增加进步事件绑定，然后再返回交给创建交互式、快速动态网页应用的网页开发技术使用xhr:函数(){ var xhr=$。AJaxsettings。xhr()；if(onprogress xhr。上传){ xhr。上传。addeventlistener(' progress '，on progress，false)；返回xhr } } })；}最后加上进度方法，为整个功能花上个句号。

/** * 侦查附件上传情况，这个方法大概0.05-0.1秒执行一次*/函数进行中(evt){ var loaded=evt。已加载；//已经上传大小情况var tot=evt.total//附件总大小var per=数学。楼层(100 *负载/总重量);//已经上传的百分比$('#son ').html(根据"%");$('#son ').css('width '，per ' % ')；}最后附上整个页面的代码，方便对比。

！DOCTYPE html html标题html 5 _ 2。html/title meta http-equiv=' content-type ' content=' text/html；charset=UTF-8 ' style type=' text/CSS ' # parent { width :550 px；高度：10pxborder:2px实心# 09F} # son { width:0高度：100%;背景色-: # 09F；文本对齐：居中；线高：10 pxfont-size :20 px字体粗细：加粗；}/style脚本类型=' text/JavaScript ' src=' http : js/jquery-1。9 .1 .js '/script脚本类型=' text/JavaScript '函数show pic(){ var pic=$(' # pic ').获取(0)。文件[0];$('img ').道具(“src”，窗口网址。createobjecturl(pic))；uploadFile()；}函数uploadFile(){ var pic=$('#pic ').获取(0)。文件[0];var formData=new formData()；formData.append('file '，pic)；/** * 必须错误的才会避开jQuery对表单数据的默认处理* XMLHttpRequest会对表单数据进行正确的处理*/$.ajax({ type: 'POST '，url: 'upload '，data: formData，processData : false，//必须错误的才会自动加上正确的content-Type content Type : false，xhr : function(){ var xhr=$。AJaxsettings。xhr()；if(onprogress xhr。上传){ xhr。上传。addeventlistener(' progress '，on progress，false)；返回xhr } } })；} /** * 侦查附件上传情况，这个方法大概0.05-0.1秒执行一次*/函数进行中(evt){ var loaded=evt。已加载；//已经上传大小情况var tot=evt.total//附件总大小var per=数学。楼层(100 *负载/总重量);//已经上传的百分比$('#son ').html(根据"%");$('#son ').css('width '，per ' % ')；}/script/head body img width=' 400 ' height=' 250 '/br/input type=' file ' id=' pic ' name=' pic ' onchange=' showPic()'/input type=' button ' value='上传图片onclick=' uploadFile()'/br/div id=' parent ' div id=' son '/div/div/body/html