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判断非数字的简单例子
Jul 18 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
vue 页面跳转的实现方式
Jan 12 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制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
PHP统计代码行数的小代码
2019/09/19 Python
django ajax发送post请求的两种方法
2020/01/05 Python
年度考核自我鉴定
2013/11/09 职场文书
中介业务员岗位职责
2014/04/09 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
2014年采购员工作总结
2014/11/18 职场文书
节水倡议书
2015/01/19 职场文书
公积金接收函格式
2015/01/30 职场文书
员工离职证明范本
2015/06/12 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏