【JS】ajax 实现无刷新文件上传
2015-07-11 20:23
603 查看
一、摘要
最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种
1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果
2) 使用ajax 请求, 使用formData 对象传输二进制文件,适用于获取后端返回的数据并进行处理
两种方法第一种实现简单,浏览器支持度高, 第二种formData的实现方式,可以对上传是否成功,或者针对上传文件内容进行解析的内容进行处理,但是浏览器支持率不高,具体如下
桌面端:
移动端:
FormData 是 XMLHttpRequest Level 2 的新接口, 作用有两大类
2) 传输二进制文件,实现无刷新文件上传
FormData的API
fd.append(key, value); // 可以在封装form 表单的基础上增加数据
最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种
1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果
<form target="hiddenFrame" method="post" enctype="multipart/form-data" action='xx'> <input value=""/> <iframe name="hiddenFrame" style="display:none"/> </form>
2) 使用ajax 请求, 使用formData 对象传输二进制文件,适用于获取后端返回的数据并进行处理
var fd = new FormData($('#form')); $.ajax({ url: '', type: 'get', data: fd, async: false, cache: false, contentType: false, // 告诉jQuery不要去设置Content-Type请求头 processData: false, // 告诉jQuery不要去处理发送的数据 success: function (data) { } })
两种方法第一种实现简单,浏览器支持度高, 第二种formData的实现方式,可以对上传是否成功,或者针对上传文件内容进行解析的内容进行处理,但是浏览器支持率不高,具体如下
桌面端:
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 7+ | 4.0 (2.0) | 10+ | 12+ | 5+ |
支持filename参数 | (Yes) | 22.0 (22.0) | ? | ? | ? |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 3.0 | ? | 4.0 (2.0) | ? | 12+ | ? |
支持filename参数 | ? | ? | 22.0 (22.0) | ? | ? | ? |
1) 封装form 表单
2) 传输二进制文件,实现无刷新文件上传
FormData的API
fd.append(key, value); // 可以在封装form 表单的基础上增加数据
相关文章推荐
- Angular.js 最强学习资源合集
- getElementsByClassName的低版本浏览器兼容方法
- 关于DOM的优化以及js的性能问题
- 2015.7.11js-10(无缝滚动)
- Extjs静态树
- 精通JavaScript开发课时20(JS事件基础)学习笔记
- js获取复选框的tr中的值,并且算出合计
- Ubuntu搭建Note.Js 平台
- [ Javascript ] 内存泄露以及循环引用解析
- js其他异常引发的问题
- JS学习2--精简有趣的JS
- 错误:浏览器访问jsp页面,却变成了下载该页面
- JavaScript实现对象数组按不同字段排序
- extjs_11_mvc模式
- JavaScript中数字与字符串相互转化
- js中匿名函数的N种写法
- 使用js实现注册表单时自动检测输入信息
- JS高级学习历程-15
- javascript 事件对象
- JSP嵌入java代码的三种标签方式