HTML5利用FormData对象实现显示进度条的文件上传【译】 - 推酷
HTML5利用FormData对象实现显示进度条的文件上传【译】
这篇文章是我翻译的外文，非本人原创
网上看到很多博客都有转载这篇文章
不过转载的都是英文
所以我就决定翻译一下
（翻译和格式化也耗费了一番心血 (～﹃～)~zZ）
英文能力有限，大家凑合看吧（翻译有略微改动）
译文原址：
H5终于解决了在上传文件的同时也能显示上传进度的问题
如今，大多网站都使用Flash播放器来实现这一功能。
一些网站仍然使用html的form标签
（enctype=multipart/form-data）
但是它需要在服务器端改动来使用户显示上传进度
实际上，我们需要做的是挂接到服务器的字节流
而它正在接收一个文件
所以我们知道有多少已接收字节
并以某种方式传达信息返回给客户端浏览器
而它仍然是正在上传的文件
这种解决方案非常好（尤其对于大文件）
然而，它相当复杂
因为你基本上是接管整个服务器端处理（当你挖掘到字节流）
HTML5上传文件
XMLHttpRequest对象已经得到HTML5规范的扩展
特别是XMLHttpRequest的2级标准（目前最新版本）
已经包括了以下新特点：
处理字节流
（如File、Blob和FormData对象在上传/下载过程中）
上传/下载过程中的进度事件
匿名请求（不发送HTTP请求）
在这篇文章中，我们主要使用第1条和第2条
特别是上传文件使用XMLHttpRequest和向用户提供上传进度信息
注意，这种解决办法不需要服务器端做出任何变动
至少是处理multipart / form-data协议这种程度
所以，现有的服务器端逻辑应保持不变
这就使得这种技术更容易适应
【图1：文件上传（上传刚开始）】
【图2：文件上传（上传已完成）】
上面的图片提供给用户以下信息：
文件选择信息
进度条已完成百分比
上传速度/上传带宽
已上传字节
服务器端响应
最后一条看起来不重要，但其实这种环境十分重要
请记住，用户通常不会提交HTML表单后，就从该页面离开
因为我们使用XMLHttpRequest
上传发生在后台，该网页的用户没变
如果你的业务流程可以用到它
那将会是很好的用户体验
HTML5进度事件
按照HTML5的进度事件规范
HTML5的进度事件提供以下相关信息
total - 被转移总字节数
loaded - 已上传字节
lengthComputable - 指定上传总数据大小（上传文件总大小已知）
你应该注意到，我们需要使用这两条信息来计算出所有我们要显示给用户的其他信息
这是十分简单的计算
但它确实涉及很多额外代码，并建立定时器
考虑到用户应该也可以了解进度信息
HTML5的进度事件也注意到了这一需求
因为对于浏览器厂商来说，在每次进度增加后提供额外信息十分简单
所以我建议的进度事件应修改如下：
total - 被转移总字节数
loaded - 已上传字节
lengthComputable - 指定上传总数据大小（上传文件总大小已知）
transferSpeed - 传输速度
timeRemaining - 剩余时间
首先是一个非常简单的HTML表单
&!DOCTYPE html&
&title&Upload Files using XMLHttpRequest - Minimal&/title&
&form id=&form1& enctype=&multipart/form-data& method=&post& action=&Upload.aspx&&
&div class=&row&&
&label for=&fileToUpload&&Select a File to Upload&/label&&br /&
&input type=&file& name=&fileToUpload& id=&fileToUpload& onchange=&fileSelected();&/&
&div id=&fileName&&&/div&
&div id=&fileSize&&&/div&
&div id=&fileType&&&/div&
&div class=&row&&
&input type=&button& onclick=&uploadFile()& value=&Upload& /&
&div id=&progressNumber&&&/div&
【代码1：HTML】
注意， &input type=&file&/& 元素具有onchange事件绑定了js函数fileSelected()
每次用户通过浏览在本地系统上的文件就会触发此事件
fileSelected()函数如下：
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size & 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.
document.getElementById('fileSize').innerHTML = 'Size: ' + fileS
document.getElementById('fileType').innerHTML = 'Type: ' + file.
【代码2：fileSelected()函数】
函数中的第一行你可能理解可能不理解
实际上，一旦你引用了 &input type=&file&& 元素
你就可以使用一个叫做FileList的对象，这是HTML5新规范的一部分
的一部分）
FileList对象是文件的集合
更具体地说，它是File对象的集合
File对象有以下属性：
name - 文件名称（包含完整路径）
type - 文件MIME类型（小写）
size - 文件字节大小
这越来越有趣了，不是吗？
我们可以访问的客户端信息
事实上，File API（使用FileReader对象）同样可以让我们访问的客户端文件内容（文件流或字节）
在这个例子中我们用FileReader来处理，所以我不打算用新对象来让你失去耐心
我们有几个新对象还没有讨论
对你们来说，可以使用File对象提供的信息
来阻止用户上传超过一定大小的文件
或者你可以使用type属性找出用户试图上传和修改的文件类型
以上的JavaScript方法填充于灰色文本（上面图1和图2的灰色方框）
（使用File对象获取选中文件的信息）
文件的大小是字节，所以有办法将其转换为我们更容易理解的形式
（例如使用15.65MB代替字节）
用户选择文件后，会通过点击上传按钮来上传文件
这里还要注意上传按钮onclick事件绑定了js函数uploadFile()
uploadFile()函数如下：
function uploadFile() {
var xhr = new XMLHttpRequest();
var fd = document.getElementById('form1').getFormData();
/* 事件监听 */
xhr.upload.addEventListener(&progress&, uploadProgress, false);
xhr.addEventListener(&load&, uploadComplete, false);
xhr.addEventListener(&error&, uploadFailed, false);
xhr.addEventListener(&abort&, uploadCanceled, false);
/* 下面的url一定要改成你要发送文件的服务器url */
xhr.open(&POST&, &UploadMinimal.aspx&);
xhr.send(fd);
【代码3：uploadFile()函数】
在这个函数的第二行，你会看到另一个对象FormData
我们从来没有见过，也没有使用过它
你没有真正看到它，但我们通过一个方法getFormData()得到它的一个引用
FormData对象类似于字典（数据结构），名/值对的集合
名字的部分就是表单的名称（HTML中定义）
值的部分就是是该字段的值
值的部分可以是一个字符串，数字，甚至是File对象（可以看代码4）
所以，当你在表单调用了getFormData()方法就能获得FormData对象的引用（表单的键值对集合）
你可以使用这个引用作为你要发送给服务器端的信息
这使得提交整个表单变得十分简单
现在，你可以手动创建一个FormData实例对象发送给服务器
或者在发送之前向FormData对象中添加额外信息
关于FormData的注意事项
需要注意的是，写这篇文章时Chrome 6支持使用新的API上传文件
但好像不支持getFormDate()方法，但支持FormData对象
所以在代码6中手动创建了一个FormData实例
另一种实例化FormData的方法是在表单元素中传递引用
像这样 var fd = new FormData(document.getElementById('form1'));
这个构造函数的优点是用所有表单填充FormData实例（不必手动完成）
（类似于前面讨论表单元素的getFormData方法，写这篇文章时，Firefox支持这个方法）
代码4向你展示了如何创建一个FormData实例
分配任意字段和值，包括File对象的引用（通过用户 &input type=&file&& 选择的文件）
var fd = new FormData();
fd.append(&author&, &Shiv Kumar&);
fd.append(&name&, &Html 5 File API/FormData&);
fd.append(&fileToUpload&, document.getElementById('fileToUpload').files[0]);
【代码4：手动创建一个FormData实例】
让我们回到代码3，你会发现我们已经订阅了XMLHttpRequest对象的一些事件
尤其要注意代码中第一行在监听事件后的注释
xhr.upload.addEventListener(&progress&, uploadProgress, false);
我们订阅的进度事件并不是XMLHttpRequest实例的，而是在XMLHttpRequest实例的upload属性上
这是一个 XMLHttpRequestUpload类型
（这个事件目标有一个progress事件，我们可以订阅它来获取当前发生的上传信息）
我们不必在这个对象上烦恼
只要记得，当使用XMLHttpRequest上传数据到服务器时
你必须订阅它upload属性的progress事件
有关progress事件的注意事项
XMLHttpRequest对象也有它自己的progress事件
当你从服务器下载数据时可以订阅该事件（我们这里不涉及）
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
document.getElementById('progressNumber').innerHTML = '无法计算';
function uploadComplete(evt) {
/* 当服务器响应后，这个事件就会被触发 */
alert(evt.target.responseText);
function uploadFailed(evt) {
alert(&上传文件发生了错误尝试&);
function uploadCanceled(evt) {
alert(&上传被用户取消或者浏览器断开连接&);
【代码5：各种事件处理函数的实现】
上面的代码已经写得很清楚了，就不再赘述了
完整简约的解决方案
下面的代码清单是包括能够支持的最小文件与进度指示器上传所需的JavaScript和HTML整个页面
我尽量保证它的简洁
所以如果你想要使用自己的布局和显示信息可以使用借此扩展
HTML5还引入了progress标签用于显示进度
progress元素有max和value属性，因此使用它可以非常简单的显示进度
但是，在写这篇文章的时候，只有Chrome6支持这个元素
所以我在这个简约的解决方案没有使用它
更改服务器端脚本的URL
请务必将URL更改为指向你上传文件的服务器端URL
在下面的代码清单中
UploadMinimal.aspx的uploadFile()方法：
xhr.open(&POST&, &UploadMinimal.aspx&);
&!DOCTYPE html&
&title&Upload Files using XMLHttpRequest - Minimal&/title&
&script type=&text/javascript&&
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size & 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.
document.getElementById('fileSize').innerHTML = 'Size: ' + fileS
document.getElementById('fileType').innerHTML = 'Type: ' + file.
function uploadFile() {
var fd = new FormData();
fd.append(&fileToUpload&, document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener(&progress&, uploadProgress, false);
xhr.addEventListener(&load&, uploadComplete, false);
xhr.addEventListener(&error&, uploadFailed, false);
xhr.addEventListener(&abort&, uploadCanceled, false);
xhr.open(&POST&, &UploadMinimal.aspx&);
xhr.send(fd);
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
document.getElementById('progressNumber').innerHTML = '无法计算';
function uploadComplete(evt) {
/* 当服务器响应后，这个事件就会被触发 */
alert(evt.target.responseText);
function uploadFailed(evt) {
alert(&上传文件发生了错误尝试&);
function uploadCanceled(evt) {
alert(&上传被用户取消或者浏览器断开连接&);
&form id=&form1& enctype=&multipart/form-data& method=&post& action=&Upload.aspx&&
&div class=&row&&
&label for=&fileToUpload&&Select a File to Upload&/label&&br /&
&input type=&file& name=&fileToUpload& id=&fileToUpload& onchange=&fileSelected();&/&
&div id=&fileName&&&/div&
&div id=&fileSize&&&/div&
&div id=&fileType&&&/div&
&div class=&row&&
&input type=&button& onclick=&uploadFile()& value=&Upload& /&
&div id=&progressNumber&&&/div&
【代码6：完整简约的代码清单】
嗯，这几乎涵盖了所有新版HTML5功能的简约版本
在图片2中大家也看到了，获取其他信息需要数学知识
这是相当多的额外的工作，不仅仅获得这些信息需要用到数学，显示和动画等等也要用
例如获取上传的速率（上传速度）。
我们做到了以下几点：
在uploadProgress(evt)事件中，应该存储evt.loaded和evt.total作为全局变量
我们创建了一个每秒触发的计时器事件
在定时器的回调中，我们获取了传输字节的差值（与1s之前的差）
每秒上传字节数让我们得到了上传速度
注意，在这个demo中，我设置了定时器每500毫秒获取从而更加精细
总而言之，一切都在代码中了，认真看一看
我希望这篇文章对你有所帮助
若翻译有不好的地方，还请大家包涵指正
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致前端在线资源
本文地址：
一、良生- input type=file与文件上传
本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下：
&input type=file&
但是，为了习惯，我们多写成：
&input type="file"&
在HTML5出现之前(XHTML)，我们的闭合规则则有些出入：
&input type="file" /&
顾名思义，选择文件，并上传文件。
在万恶的旧时代，HTML5还没有出现之前，原生的file input表单元素只能让我们一次上传一张图片。无法满足一次上传多图的交互需求，所以，很多场景，就被swfupload.js给取代了，有点逐渐淡出人们视野的感觉。
然，技术发展，日新月异，三十年河东，三十年河西。随着原生HTML5表单对多图(multiple属性)、上传前预览，等支持越来越广泛，原生的file input表单元素又迎来了新的升级，flash为背景的swfupload.js注定要落寞。
但是，对于PC项目，IE8-IE9浏览器还是不能忽略的。所以，现在，很流行的一种处理方式，就是HTML5 file上传和flash swfupload上传一起整合的模式，优先使用原生HTML5上传，不支持的，使用flash上传。我之前有篇关于HTML5上传的文章，每天访问量很高的：“”，大家有兴趣可以看看。
二、莲安-原生input上传与表单form元素
如果想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢，就是：
enctype="multipart/form-data"
enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencoded“。对于普通数据是挺适用的，但是，对于文件，科科，就不能乱编码了，该什么就是什么，只能使用multipart/form-data作为enctype属性值。
无论是旧时代的单图上传，还是HTML5中的多图上传，均是如此。
三、沿见-原生file input图片上传前预览与Ajax上传
文件，尤其图片，上场前能够预览，是很棒的交互体验。不走服务器，不耗费流量，多棒！
理想虽好，实现起来……
在HTML5还没出现的旧时代，只有低版本的IE浏览器貌似有方法，使用私有的滤镜，超越安全的限制（其实是利用了不好的东西），实现图片直接预览；但是呢，那个时候，Chrome, FireFox没有这一出，于是，想要使用原生file input实现图片的上传前预览，兼容性坎很难跨过去。
但是，后来，HTML5来了，我们出现了转机，IE10+以及其他现代浏览器，可以让我们直接读取图片的数据，然后在页面上呈现，实现了上传前预览；加上之前老IE的滤镜策略，貌似，可行。但是呢但是，老的IE浏览器只能最多一次选择一个文件，因此，只有单图上传的时候，大家可以考虑考虑。
传统的form提交，是要改变页面流的，也就是刷新后跳转。好的体验应该是走Ajax交互的。HTML5里面支持二进制formData数据提交，因此，可以从容Ajax提交上传的文件数据；那老旧的IE浏览器怎么办？
一般方法如下：
form元素新增target属性，其值指向页面内隐藏的一个&iframe&元素的id, 如下示意：
&form action="" method="post" enctype="multipart/form-data" target="uploadIframe"&&
&iframe id="uploadIframe"&&/iframe>
处理&iframe&元素的onload事件，获得返回内容（如下代码示意），具体细节非本文重点，不表。
var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].
var response = doc.body && doc.body.innerHTML;
OK, 当然，你也可以不用像上面这么麻烦，直接使用. 原理呢，就是上面这样，但是，不需要这么麻烦。
四、恩和-原生file input大小、按钮文字等UI自定义
原生的file input不收待见的另外一个原因是：长的丑还不好控制。
举个例子，下图这个“选择文件”这几个文字，我们就不好对file控件动刀子实现自定义：
怎么办呢？
有一种方法是这样的：
让file类型的元素透明度0，覆盖在我们好看的按钮上。然后我们去点击好看的按钮，实际上点击是是file元素。
然而，此方法有一些不足：
尺寸控制不灵活。CSS width属性有些浏览器不管用，需要使用size，然后高度控制也不精准，我们很难正好覆盖在好看的自定义按钮上。
样式不好控制，按钮的hover态以及active态不好处理。
HTML结构限制以及定位成本。
更好的方法是，使用label元素与file控件关联，好处在于：
点击自定义的漂亮按钮就是点击我们file控件；
没有尺寸控制不精确的问题；
没有不能响应hover态active态的问题；
我们的漂亮按钮甚至可以在form表单元素的外面，例如：
&label class="ui_button ui_button_primary" for="xFile">上传文件&/label>
&form>&input type="file" id="xFile" style="position:clip:rect(0 0 0 0);">&/form>
效果如下（真实实时效果）：
五、盈年-file类型控件的accept属性
input file类型控件有一个属性，名为accept, 可能有些小伙伴不太了解。可以用来指定浏览器接受的文件类型，也就是的那个我们打开系统的选择文件弹框的时候，默认界面中呈现的文件类型。例如：accept="image/jpeg"，则界面中只有jpg图片，如下截图，同时，窗体右下方是“自定义文件”按钮：
实际开发的时候，很少只允许传jpg图片，应该都是只能传图片类型，此时，可以使用：
accept="image/*"
于是乎，“自定义文件”按钮变成了语义更明确的“图片文件”：
但是，需要注意的是，虽然使用accept="image/*"很方便，但是在Chrome浏览器下，可能会有文件选择窗口打开非常慢点问题，因此，如果仅仅是上传图片，建议使用：
accept="image/png, image/jpeg, image/gif, image/jpg"
accept属性值其实是MIME类型, 例如下面几个可能常用的：
accept="application/pdf"
accept="audio/x-mpeg"
accept="text/html"
.accept="video/x-mpeg2"
然后，多个属性值使用逗号分隔，例如：
&input accept="audio/*,video/*,image/*">
六、内河-input file只选择文件夹而不是文件
试试下面的代码，测试了下，Chrome浏览器下是可以的，Firefox浏览器下也是可以的，IE貌似还不行。
&input type="file" webkitdirectory directory multiple/&
七、又及-input file值的清除
现代浏览器直接value = "", 有些IE浏览器貌似不行，好像使用file.outerHTML = file.outerHTML，我自己没测试。
不过我觉得比较麻烦，还要判断浏览器什么的。像本文的Ajax单图上传，直接form.reset()就可以了。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：
（本篇完）
相关文章 (0.568) (0.427) (0.235) (0.201) (0.188) (0.188) (0.150) (0.150) (0.141) (0.103) (RANDOM - 0.009)
标签： , , , , , , ,
赞助商广告()：
如果你月薪不足20K，不妨
这里有最全的web前端开发视频
如果你有1~3年前端开发经验，不妨
想找个师兄入门前端？不妨
热门总排行通过Ajax方式上传文件，使用FormData进行Ajax请求 - 博客频道 - CSDN.NET
Inuyasha1121的专栏
分类：ajax上传文件
通过传统的form表单提交的方式上传文件：
&form id= &uploadForm& action= &http://localhost:8080/cfJAX_RS/rest/file/upload& method= &post& enctype =&multipart/form-data&&
&h1 &测试通过Rest接口上传文件 &/h1&
&p &指定文件名： &input type =&text& name=&filename& /&&/p&
&p &上传文件： &input type =&file& name=&file& /&&/p&
&p &关键字1： &input type =&text& name=&keyword& /&&/p&
&p &关键字2： &input type =&text& name=&keyword& /&&/p&
&p &关键字3： &input type =&text& name=&keyword& /&&/p&
&input type =&submit& value=&上传&/&
不过传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的。
Ajax的方式进行请求：
url : &http://localhost:8080/STS/rest/user&,
type : &POST&,
data : $( '#postForm').serialize(),
success : function(data) {
$( '#serverResponse').html(data);
error : function(data) {
$( '#serverResponse').html(data.status + & : & + data.statusText + & : & + data.responseText);
通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。
通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。
但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传了。
关于FormData及其用法
FormData是什么呢？我们来看看Mozilla上的介绍。
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的方法来异步的提交这个&表单&.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.&
所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
Constructor
FormData()
想得到一个FormData对象：
var&formdata =&new&FormData();
W3c草案提供了三种方案来获取或修改FormData。
方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：
var&formdata =&new&FormData();
formdata.append(&name&,&&呵呵&);
formdata.append(&url&,&&/&);
方案2：取得form元素对象，将它作为参数传入FormData对象中！
var&formobj =& document.getElementById(&form&);
var&formdata =&new&FormData(formobj);
方案3：利用form元素对象的getFormData方法生成它！
var&formobj =& document.getElementById(&form&);
var&formdata = formobj.getFormData()
本方法用于向已存在的键添加新的值，如该键不存在，新建之。
formData.append(name, value);
formData.append(name, value, filename);
注:&通过&方法赋给字段的值若是数字会被自动转换为字符(字段的值可以是一个对象,一个对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).
键 (key)， 对应表单域value
表单域的值filename (optional)
The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is &blob&.
将一对键和值从&FormData&对象中删除。
formData.delete(username);
返回给定键的第一个值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username);
返回给定键的所有值
formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.getAll(username);
检查是否包含给定键，返回&true&或&false
formData.has(username);
设置给定键的值
formData.set(name, value);
formData.set(name, value, filename);
Firfox(Gecko)
Intenet Explorer
Basic support
append with filename
22.0(22.0)
delete, get, getAll, has, set
Behind Flag
Not supported
Not supported
Not supported
Chrome Android
Firfox Mobile (Gecko)
Firfox OS (Gecko)
Opera Mobile
Safari Mobile
Basic support
append with filename
22.0(22.0)
delete, get, getAll, has, set
Not supported
Not supported
Not supported
Not supported
Ajax通过FormData上传文件
1.使用&form&表单初始化FormData对象方式上传文件
id=&uploadForm& enctype=&multipart/form-data&&
id=&file& type=&file& name=&file&/&
id=&upload& type=&button&&upload&
javascript代码
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
这里要注意几点：
processData设置为false。因为data值是FormData对象，不需要对数据做处理。&form&标签添加enctype=&multipart/form-data&属性。cache设置为false，上传文件不需要缓存。contentType设置为false，不设置contentType值，因为是由&form&表单构造的FormData对象，且已经声明了属性enctype=&multipart/form-data&，所以这里设置为false。
上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为&input&中声明的是name=&file&。
如果不是用&form&表单构造FormData对象又该怎么做呢？
2.使用FormData对象添加字段方式上传文件
id=&uploadForm&&
id=&file& type=&file&/&
id=&upload& type=&button&&upload&
这里没有&form&标签，也没有enctype=&multipart/form-data&属性。
javascript代码
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
这里有几处不一样：
append()的第二个参数应是文件对象，即$('#file')[0].files[0]。contentType也要设置为‘false’。
从代码$('#file')[0].files[0]中可以看到一个&input type=&file&&标签能够上传多个文件，
只需要在&input type=&file&&里添加multiple或multiple=&multiple&属性。
3.服务器端读文件
从Servlet 3.0&开始，可以通过&request.getPart()&或&request.getPars()&两个接口获取上传的文件。
转载文章：
Inuyasha1121
排名：第11860名
（20）（69）（10）（1）（1）（33）（4）（1）（3）（5）（6）（8）（3）（3）（5）（1）（1）（3）（1）（3）（1）（1）（6）（1）（1）（1）（12）（1）（1）（1）（17）（7）（17）（1）（3）（2）（13）（1）（1）（4）（2）（3）（1）（1）（1）（1）（4）（1）（1）（1）（2）（1）（1）（0）（5）（2）（1）（1）（1）（1）（1）（1）（1）（0）（1）（1）（1）（3）（1）（3）（1）（2）（1）（1）（3）（9）（6）（1）（1）（2）（1）（1）（2）（6）（1）（1）（3）（3）（7）（2）（1）（1）（4）（1）（1）（1）（1）（1）（1）（0）（1）（2）（2）（1）（1）（0）（2）（2）（1）（5）（1）（8）（1）（0）（0）（1）（0）（1）（1）（1）（1）（0）（1）（1）（0）（0）（1）（1）（1）（1）（1）（7）（9）（3）（2）（1）（1）（1）（1）