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插件Style定制化方法的分析与比较
May 03 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
关于React动态加载路由处理的相关问题
Jan 07 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
关于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对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
PHP引用返回用法示例
2016/05/28 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
JavaScript"模拟事件"的注意要点详解
2019/02/13 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python发送告警邮件脚本
2018/09/17 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
保密承诺书范文
2014/03/27 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
教师求职自荐信
2015/03/26 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript