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 相关文章推荐
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
清空上传控件input file的值
2010/07/03 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
python实现kmp算法的实例代码
2019/04/03 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
一些Solaris面试题
2015/12/22 面试题
会展中心部门工作职责
2013/11/27 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
贷款委托书
2014/08/01 职场文书
教师个人事迹材料
2014/12/17 职场文书
区域经理岗位职责
2015/02/02 职场文书
检讨书怎么写
2015/05/07 职场文书
跳高加油稿
2015/07/21 职场文书
全民创业工作总结
2015/08/13 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS