php ajax xmlhttpreq 上传文件 get,使用jQuery Ajax异步上传文件方法总结
一 使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax方法上传呢?
1 使用
表单初始化FormData对象方式上传文
HTML代码
upload
javascript代码$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false}).done(function(res) {
}).fail(function(res) {});
这里要注意几点:processData设置为false。因为data值是FormData对象,不需要对数据做处理。
标签添加enctype="multipart/form-data"属性。
cache设置为false,上传文件不需要缓存。
contentType设置为false。因为是由
表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。
上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为中声明的是name="file"。
如果不是用
表单构造FormData对象又该怎么做呢?
2 使用FormData对象添加字段方式上传文件
HTML代码
upload
这里没有
标签,也没有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]中可以看到一个标签能够上传多个文件,只需要在里添加multiple或multiple="multiple"属性。
服务器端读取文件
FormData对象上传文件跟直接提交表单效果一样,按直接提交表单的方式处理就可以了,php可以使用$_FILES来读取文件信息
二 构造请求头信息
HTML代码
upload
这里没有
标签,也没有enctype="multipart/form-data"属性。
javascript代码$(function(){
$("#upload").click(function(){
var ff = $('#file')[0].files[0];
var fname = ff.name;
$.ajax({
url: 'upload.php',
type: 'POST',
cache: false,
data: ff,
processData: false,
headers: {
"Cache-Control":"no-cache",
"X-Requested-With": "XMLHttpRequest",
"X-File-Name":fname
}
}).done(function(res) {
}).fail(function(res) {});
})
})
服务器端读取文件
php可以使用file_put_contents(‘temp’, file_get_contents('php://input'))
来接收文件,使用$_SERVER['HTTP_X_FILE_NAME']
来获取文件名,得到扩展名后可以使用copy函数将文件复制到要存放的目录即可。
class.upload.php类库简介
class.upload.php是github上php的一个很方便处理上传文件和图片的一个类,功能很强大,这里不做具体介绍,感兴趣可以自己去了解一下。
php ajax xmlhttpreq 上传文件 get,使用jQuery Ajax异步上传文件方法总结相关推荐
- ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
- jquery.ajax上传个数限制,关于jquery ajax上传的坑
@(呵呵) 今天主要介绍processData: false, contentType: false, 这两个参数--processData 默认情况下,通过data选项传递进来的数据,如果是一个对象 ...
- 无刷新上传Excel后利用JQuery AJAX 显示进度条的实现方式
1.前台上传页面代码 <divclass="clearfix mywebsite-nodata"><divid="show"><f ...
- html中异步上传文件实现示例,HTML_html中异步上传文件实现示例,复制代码代码如下: form actio - phpStudy...
html中异步上传文件实现示例 复制代码代码如下: 复制代码代码如下: 这是html中最常见最简单的表单提交方式,但是这种方式必须会切换页面,也许有些时候我们希望可以在同一个页面与服务器进行交互,并不 ...
- ashx 获取上传的文件_使用jQuery Post从.ashx获取文件
这个问题来自我提出的另一个问题 - Passing client data to server to create Excel or CSV File. 我有一个客户端页面,它建立一个JSON对象发送 ...
- ajax 更新页面变量,[Django 1.5] jQuery/Ajax 在Django使用 ,如何更新模板里里变量
最近希望实现一个页面局部刷新的功能,于是开始查阅ajax资料.幸好现在ajax很多功能都封装在jQuery这个库里面,我们可以很方便去调用.通过学习几个简单的小例子,可以实现简单的前端代码更新,还有重 ...
- ajax三种错误ie,ie下jquery ajax 80020101错误的解决方法
注意注释 删除这些注释就可以了 Windows下一个MySQL有些错误的解决方法 1.无论是什么提示.我们有一个直接看错误日志.由于它描述了最具体描述错误日志. 于MySQL安装文件夹中找到 my.i ...
- ajax调用ashx的方法,jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是&q ...
- jquery1.4.4 ajax在页面关闭时无法abort,jquery ajax abort()的使用方法
jquery ajax abort()的使用方法 由于使用的是jquery,挡在手册里没有找到关于.abort()方法,在网上搜索了一下,在http://ooxx.me/jquery-ajax-abo ...
- $.ajax datatype默认是什么类型,理解jquery ajax中的datatype属性选项值
jquery中ajax的dataType属性用于指定服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断,如果datatype选项不填写的话,会将返回的数据当成字 ...
最新文章
- JHipster生成微服务架构的应用栈(二)- 认证微服务示例
- 终于感觉掌握了一门重要的技术
- 9.Tornado下的一个简易Blog--2013-05-21
- Java 对象初始化过程
- java Concurrent包学习笔记(一):ExecutorService
- 元素上下左右居中的几种方法
- idea中如何将一个普通项目转换为maven项目
- java byte转integer_Java 八大基本数据
- studio one 3 机架声道设置_「声卡跳线」IXI Mega M8 声卡电脑/手机直播机架跳线(图文教程)...
- python turtle库详解_Python绘图Turtle库详解
- macos系统怎么取消开机启动项
- 启用FM模块后F-02创建会计凭证报错,消息号FI313 “在项目 1 (2/3/4)中未输入/派生出投资中心“ - FMDERIVE
- Macbook pro通过蓝牙连接BlackBerry拨号上网
- android开发代码实现对Apk签名,如何对apk进行签名
- 华为擎云 W510 鲲鹏 920 24 核工作站使用体验
- 元器件_封装库_命名规范
- 基于主从博弈的智能小区电动汽车充电管理及代理商定价策略
- 地理生物结业考_不到30天,初二学年地理、生物结业考试开考,老师们说……...
- 风场可视化:绘制轨迹
- android 高德地图设置不能旋转_高德地图行车记录仪AR导航怎么设置使用教程
热门文章
- 现货白银报价系统与软件
- QT调用百度地图显示,并去掉logo,可输入经纬度定位
- layui弹出层post请求
- creo自定义调用零件库_cero基础设置教程,五步cero5.0设置调用自定义标准件的方法...
- 上面两点下面一个三角形_三角形的五心是三线共点的产物,聊一聊初中数学共点线的证明思路...
- matlab傅里叶变换去噪代码,[转载]MATLAB小波去噪
- 解决css内容高度不固定,transition手风琴效果失效的情况(展开收起)
- 标签制作软件如何制作易碎品标签
- 用户网络的保存在该计算机,登录服务器,在系统桌面上显示“计算机”、“用户的文件”、“网络”、“回收站”、“控制面板”的图标,将桌面截图保存;(1分)...
- python爬虫实践(1)爬取图片网站的高清壁纸