jQuery用FormData实现文件上传的方法
投稿：daisy
字体：[ ] 类型：转载 时间：
众所周知文件上传是Web开发中的重要话题，最直接和简单的方式是通过表单直接提交文件。 下面这篇文章小编就来和大家分享jQuery利用FormData实现文件上传的方法，文中介绍的方法简单易懂，相信对大家的理解和学习很有帮助，有需要的朋友们下面来一起学习学习吧。
我们引入jQuery来进行异步上传可以获得更好的用户体验。 一方面，在JavaScript中进行异步操作比表单更加灵活； 另一方面，异步上传也避免了上传大文件时的页面长时间卡死。
一个type=file的&input&就可以让用户来浏览并选择文件， 一般会把输入控件放到一个&form&中，下面的一个简单的表单：
&input type="file" id="avatar" name="avatar"&
&button type="button"&保存&/button&
但为什么我只能选择一个文件？？给&input&添加一个multiple属性就可以多选了！
&input type="file" id="avatar" name="avatar" multiple&
获取文件列表
上述的&input&将会拥有一个叫files的DOM属性，包含了所选的文件列表（Array）。
$('button').click(function(){
var $input = $('#avatar');
// 相当于： $input[0].files, $input.get(0).files
var files = $input.prop('files');
console.log(files);
这个Array中的每一项都是一个File对象，它有下面几个主要属性：
&&&& name: 文件名,只读字符串,不包含任何路径信息.
&&&& size: 文件大小,单位为字节,只读的64位整数.
&&&& type: MIME类型,只读字符串,如果类型未知,则返回空字符串.
详情可以参考：https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications
multipart/form-data
上传文件比较特殊，其内容是二进制数据，而HTTP提供的是基于文本的通信协议。 这时需要采用multipart/form-data编码的HTTP表单。
其HTTP消息体格式如下所示：
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form- name="title"
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form- name="avatar"; filename="harttle.png"
Content-Type: image/png
... content of harttle.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
每个字段由一段boundary string来分隔，浏览器保证该boundary string不与内容重复， 因而multipart/form-data能够成功编码二进制数据。
jQuery上传文件
这是XMLHttpRequest Level 2提供的FormData对象可以帮助我们进行二进制文件的 multipart/form-data编码：
$('button').click(function(){
var files = $('#avatar').prop('files');
var data = new FormData();
data.append('avatar', files[0]);
url: '/api/upload',
type: 'POST',
data: data,
cache: false,
processData: false,
contentType: false
url, type, data想必做前端的都很熟悉了，介绍其余三个参数：
cache设为false可以禁止浏览器对该URL（以及对应的HTTP方法）的缓存。 jQuery通过为URL添加一个冗余参数来实现。
该方法只对GET和HEAD起作用，然而IE8会缓存之前的GET结果来响应POST请求。 这里设置cache: false是为了兼容IE8。
参考：/jquery.ajax/
contentType
jQuery中content-type默认值为application/x-www-form-urlencoded， 因此传给data参数的对象会默认被转换为query string（见HTTP 表单编码 enctype）。
我们不需要jQuery做这个转换，否则会破坏掉multipart/form-data的编码格式。 因此设置contentType: false来禁止jQuery的转换操作。
processData
jQuery会将data对象转换为字符串来发送HTTP请求，默认情况下会用 application/x-www-form-urlencoded编码来进行转换。 我们设置contentType: false后该转换会失败，因此设置processData: false来禁止该转换过程。
我们给的data就是已经用FormData编码好的数据，不需要jQuery进行字符串转换。
兼容性与其他选择
本文介绍的jQuery文件上传方式依赖于FormData对象， 这是XMLHttpRequest Level 2接口， 需要 IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
这意味着对于低版本浏览器只能使用直接提交文件表单的形式， 但提交大文件表单页面会长时间不响应，如果希望在低版本浏览器中解决该问题， 就只能使用别的方式来实现了，比如很多支持多文件和上传进度的Flash插件。
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具1642人阅读
jQuery（6）
class="form-horizontal" role="form" action="" method="POST" id="uploadForm"&
type="hidden" name="club.club_id" id="club_id"&
type="file" class="form-control" name='club.head_portrait' id="head_portrait" placeholder="请输入头像" &
jQuery代码
$(".save").on('click', function(){
var shangjia = $(this).attr("shangjia");
var formData = new FormData($( "#uploadForm" )[0]);
formData.append('club.disable', shangjia);
url: '@{communityControllers.ClubManageAction.save()}' ,
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (data) {
if(data.msg == 'ok'){
$('#addUpdateMode').modal('toggle');
layer.alert('保存成功', function(index){
$("#queryForm").submit();
layer.close(index);
}else if(data.msg == 'error'){
layer.alert('保存失败');
error: function (data) {
alert('出现错误');
$('#addUpdateMode').modal('toggle');
这里使用的是FormData对象来实现的；
FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。
在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明。
但上传文件部分只有底层的XMLHttpRequest对象发送上传请求，那么怎么通过jQuery的Ajax上传呢？
本文将介绍通过jQuery使用FormData对象上传文件。
最主要的代码就是：
url: '@{communityControllers.ClubManageAction.save()}' ,
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (data) {
if(data.msg == 'ok'){
$('#addUpdateMode').modal('toggle');
layer.alert('保存成功', function(index){
$("#queryForm").submit();
layer.close(index);
}else if(data.msg == 'error'){
layer.alert('保存失败');
error: function (data) {
alert('出现错误');
$('#addUpdateMode').modal('toggle');
要是有隐藏字段怎么办呢？
formData.append('club.disable', shangjia);
这样就把隐藏字段添加到了formData中，之后一起发送到后台。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：129929次
积分：2781
积分：2781
排名：第12022名
原创：142篇
评论：29条
(3)(11)(9)(15)(4)(6)(27)(23)(25)(7)(2)(4)(2)(2)(1)(4)(2)(1)html5表单 ajax方式 文件上传 FormData非iframe - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 2时,
以前遇到有文件上传的表单要ajax方式提交，总是用iframe方式，或者用一些jQuery插件，实际上也是iframe的。还有就是用flash方式，但是比较麻烦，特别是有时要判断Session的时候。现在有了html5&有了FormData()，真是事倍功倍。看完这篇文章，你就懂了。https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects
代码片段(1)
1.&[代码][JavaScript]代码&&&&
vm.save = function(){
var data = new FormData();
data.append('a_id', model.a_id);
data.append('name', model.name);
data.append('sort', model.sort);
data.append('file', $(':file')[0].files[0]);
url: '__URL__/picSave',
type: 'POST',
data: data,
processData: false,
contentType: false
}).done(function(ret){
if (ret) {
alert(ret);
alert('保存成功！');
//location = '__URL__';
开源中国-程序员在线工具：
相关的代码(1203)
11回/160193阅
[JavaScript]
83回/107003阅
[JavaScript]
21回/96243阅
[JavaScript]
2回/61859阅
[JavaScript]
49回/59671阅
13回/54617阅
[JavaScript]
50回/51724阅
[JavaScript]
1回/44149阅
17回/43420阅
[JavaScript]
11回/37736阅
[JavaScript]
在哪些版本的浏览器可运行？不会只有ff吧？
2楼：cloudy_l 发表于
引用来自“简单代码”的评论在哪些版本的浏览器可运行？不会只有ff吧？Chrome 应该也是可以的...
3楼：yelloweye 发表于
iframe方式，可以弄进度显示 这个弄不了
4楼：被风遗忘 发表于
引用来自“cloud_ly”的评论引用来自“简单代码”的评论在哪些版本的浏览器可运行？不会只有ff吧？Chrome 应该也是可以的...Chrome ff and IE10+
5楼：deadlister 发表于
服务器端怎么取值，request.getParameter( )?为什么取过来是null？
6楼：sunnysky 发表于
服务端如何取值？
开源从代码分享开始
王道中强流的其它代码FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。在 Mozilla Developer 网站
有详尽的FormData对象使用说明。 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求，那么怎么通过jQuery的Ajax上传呢？ 本文将介绍通过jQuery使用FormData对象上传文件。&HTML代码&&form&id="uploadForm"&enctype="multipart/form-data"&&&&&&input&id="file"&type="file"&name="file"/&&&&&&button&id="upload"&type="button"&upload&/button&&/form&&javascript代码&$.ajax({&&&&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。因为是由&form&表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。 上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为&input&中声明的是name="file"。 如果不是用&form&表单构造FormData对象又该怎么做呢？&使用FormData对象添加字段方式上传文件&&HTML代码&&&div&id="uploadForm"&&&&&&input&id="file"&type="file"/&&&&&&button&id="upload"&type="button"&upload&/button&&/div&&这里没有&form&标签，也没有enctype="multipart/form-data"属性。&javascript代码&var&formData&=&new&FormData();formData.append('file',&$('#file')[0].files[0]);$.ajax({&&&&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"属性。 &
阅读(...) 评论()后使用快捷导航没有帐号？
只需一步，快速开始
查看: 47032|回复: 3
jQuery+ajax如何实现文件上传??
UID148911在线时间 小时积分784帖子离线17331 天注册时间
高级会员, 积分 784, 距离下一级还需 216 积分
&script type=&text/javascript&&
& & & & & & & & & & & & $(document).ready(function(){
& & & & & & & & & & & & & & & & $('#submitPost').click(function () {
& & & & & & & & & & & & & & & & & & & & var content = $('textarea[name=content]');
& & & & & & & & & & & & & & & & & & & & var email = $('input[name=email]');
& & & & & & & & & & & & & & & & & & & & var gender = $('input[name=gender]');
& & & & & & & & & & & & & & & & & & & & var file= $('input[name=file]');
& & & & & & & & & & & & & & & & & & & & var data = 'content=' + content.val() + '&email=' + email.val() + '&gender=' + gender.val() + '&icon=' + icon.val();
& & & & & & & & & & & & & & & & & & & & $.ajax({
& & & & & & & & & & & & & & & & & & & & & & & & url: &index.php?mod=post&act=add&cid={$cid}&,& & & & //this is the php file that processes the data and send mail
& & & & & & & & & & & & & & & & & & & & & & & & type: &POST&, //POST method is used
& & & & & & & & & & & & & & & & & & & & & & & & data: data,& & & & //pass the data& & & & & & & &
& & & & & & & & & & & & & & & & & & & & & & & & cache: false,&&//Do not cache the page
& & & & & & & & & & & & & & & & & & & & & & & & //success
& & & & & & & & & & & & & & & & & & & & & & & & success: function (res) {& & & & & & & & & & & & & & & &
& & & & & & & & & & & & & & & & & & & & & & & & & & & & $.fn.colorbox({html:res});
& & & & & & & & & & & & & & & & & & & & & & & & }
& & & & & & & & & & & & & & & & & & & & });
& & & & & & & & & & & & & & & & & & & &
& & & & & & & & & & & & & & & & });
& & & & & & & & & & & & });
& & & & & & & & &/script&
复制代码
ajax是不是没办法使用enctype=&multipart/form-data&把图片文件变成二进制流传到服务器上啊??? 要怎么实现上传呢. 求教~~
UID418179在线时间 小时积分935帖子离线17331 天注册时间
高级会员, 积分 935, 距离下一级还需 65 积分
如果你是用jquery的话，建议你用ajaxform这个插件，很方便的
UID387007在线时间 小时积分15775帖子离线17331 天注册时间
要无刷新上传必须用iframe，详细可以参考这个
UID188562在线时间 小时积分928帖子离线17331 天注册时间
高级会员, 积分 928, 距离下一级还需 72 积分
原帖由 [i]cloudgamer 于
15:31 发表
要无刷新上传必须用iframe，详细可以参考这个无刷新上传教程
很好用。谢谢。
Powered by}