使用jquery+ajax实现文件上传
2016-10-02 19:13
501 查看
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用
XMLHttpRequest发送这个”表单”。
在
Mozilla Developer网站 使用
FormData对象 有详尽的FormData对象使用说明。
但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢?
本文将介绍通过jQuery使用FormData对象上传文件。
使用表单初始化
FormData对象方式上传文件
HTML代码
<form id="formcentont" onsubmit="return false"> <input type="text" name="name" /> <input type="file" name="pic" id="pic"/> <input type="submit" onclick="func()" value="提交" id="g"/> </form>
ajax 提交
// new 一个对象 然后往这个对象里面添加数据,然后直接提交,不需要写一行html代码 function func(){ var form = new FormData(document.getElementById('formcentont')); $.ajax({ url:"./ajax.php", type:"post", data:form, processData:false, // 这个参数必须要 在你发送文件上传的时候就需要设置 contentType:false, // 发送信息至服务器时内容编码类型 // async:true, //设置是异步 // dataType:'json', //服务器返回的数据是json格式的 success:function(data){ } }); }
这里要注意几点:
processData设置为
false。因为
data值是
FormData对象,不需要对数据做处理。
processData:false它会调用返回值:
StringjQuery.param把
{ width:1680, height:1050 }参数对象序列化为
width=1680&height=1050这样的字符串。
如果你要发送的是个
xmlDocument,当然就不希望能这么发送了,必须得设置
processData=false,且以
POST方式发送才行。
原生的
XMLHttpRequest对数据的处理是手动并无这个参数。要发送
XML时
xhr.send(xmlDocument)能直接发送。
@return dataType/string
dataType是返回的类型 在成功后的data值的类型
默认值:
"application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型
dataType
类型:
String
标签添加
enctype="multipart/form-data"属性。
cache设置为
false,上传文件不需要缓存。
contentType设置为
false。因为是由表单构造的
FormData对象,且已经声明了属性
enctype="multipart/form-data",所以这里设置为
false。
上传后,服务器端代码需要使用从查询参数名为pic获取文件输入流对象,因为
<input>中声明的是
name="pic"。 * * 如果不是用表单构造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"属性。
(转载):http://blog.csdn.net/strive_then_choose/article/details/50585503 作者:strive_then_choose ; 本人做了一些修改
相关文章推荐
- jquery 实现ajax 上传文件的功能(使用插件 ajaxfileupload)
- PHP服务器文件管理器开发小结(十):使用jQuery和iframe实现AJAX文件上传
- Ajax实现文件上传(使用jQuery插件之ajaxFileUpload)
- 使用Java、Jquery、Ajax实现的带进度条的文件上传。
- Asp.Net Mvc 使用jQuery实现Ajax文件上传
- 用jQuery Form Plugin实现Ajax无刷新的文件上传
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- Jquery AjaxUpload实现文件上传功能代码实例教程
- 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- jQuery插件AjaxFileUpload可以实现ajax文件上传
- 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- JQuery的AJAX与Spring MVC实现异步文件上传
- AjaxUpLoad.js使用实现文件上传
- (转自dflying chen)使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- 如何实现jQuery的Ajax文件上传
- 关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现
- 如何实现jQuery的Ajax文件上传,PHP如实文件上传. AJAX上传文件,PHP上传文件。
- Jquery AjaxUpload实现文件上传