jQuery Ajax 上传文件处理方式介绍(推荐)


Posted in Javascript onJune 30, 2016

AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分。

下面的表格列出了所有的 jQuery AJAX 方法:

jQuery Ajax 上传文件处理方式介绍(推荐)

jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式。

FormData对象

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest写的请求

XMLHttpRequest方式

xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);

其实jquery的ajax也可以支持到的,关键是设置:processData 和 contentType 。

ajax方式

var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({ 
url : Url, 
type : 'POST', 
data : formData, 
// 告诉jQuery不要去处理发送的数据
processData : false, 
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
beforeSend:function(){
console.log("正在进行,请稍候");
},
success : function(responseStr) { 
if(responseStr.status===0){
console.log("成功"+responseStr);
}else{
console.log("失败");
}
}, 
error : function(responseStr) { 
console.log("error");
} 
});
Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
js 表格隔行颜色
Dec 02 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
ES5新增数组的实现方法
May 12 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 #Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 #Javascript
浅谈JS中json数据的处理
Jun 30 #Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 #Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 #Javascript
简单实现js间歇或无缝滚动效果
Jun 29 #Javascript
js精准的倒计时函数分享
Jun 29 #Javascript
You might like
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
django接入新浪微博OAuth的方法
2015/06/29 Python
python实现各进制转换的总结大全
2017/06/18 Python
Django中Forms的使用代码解析
2018/02/10 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
opencv实现简单人脸识别
2021/02/19 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
keras导入weights方式
2020/06/12 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
专业实习自我鉴定
2013/10/29 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
消防志愿者活动方案
2014/08/23 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
2016教师国培研修感言
2015/12/08 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js