通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题;所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+,对兼容性比较敏感的网站慎用。
在工作中遇到了一个问题:在一个页面中,有4块内容,每块内容都包含一个图片上传功能,希望可以实现一键把这四块内容都上传上去。
我没有用插件实现上传功能,就是用的input[type=file],因此就遇到一个问题就是:
①传统的form表单会导致页面刷新,无法实现上述功能
②把表单serialize()序列化用Ajax的方式提交,也无法把上传文件的文件流进行序列化,也不行
我现有的知识就搞不定了,只能求助网上的大神了,百度了一下,大概看了两个方案:
①在js中创建一个新form表单,把页面中原form表单copy一份,然后再用js搞一个iframe,把form表单的target设置为iframe,这样提交后返回的内容就在iframe里,最后再把form表单、iframe移除
该方案我没有尝试,只能说个大概;参考地址:http://www.oschina.net/code/snippet_569983_11316
②就是本文下面要说的使用FormData对象实现
有其他思路方案的希望不吝赐教!
好,介绍完背景之后,开始介绍我们今天的主题:FormData对象。
有两种方式可以创建一个FormData对象:
①创建一个空的FormData对象,然后使用append()方法向该对象里添加字段
②使用HTML表单来初始化一个FormData对象
下面分别介绍一下:
第一种方式:
var oMyForm = new FormData();
oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456);
oMyForm.append("file", $('#file')[0].files[0]); $.ajax({
url: '/Manage/UploadImg',
type: 'POST',
cache: false,
data: oMyForm,
processData: false,
contentType: false,
async: false
}).done(function(res) {}).fail(function(res) {});
第二种方式:
<form id="uploadForm" enctype="multipart/form-data">
<p>指定文件名: <input type="text" name="filename" value="" /></p>
<p>上传文件: <input type="file" name="file" /></ p>
<input type="button" value="上传" onclick="doUpload()" />
</form>
var formData = new FormData($('#uploadForm')[0]);
formData.append('num', '1');//可以在已有表单数据的基础上,继续添加新的键值对
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {}).fail(function(res) {});
注意:
- Ajax的processData设置为false。因为data值是FormData对象,不需要对数据做处理。
- 第二种方式中<form>标签加enctyp e="multipart/form-data"属性。
- cache设置为false,上传文件不需要缓存。
- contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="mutipart/form-data",所以这里设置为false。
前端搞定之后,剩下的就是后端处理了。ok,就到这里了。
参考的文章:
http://yunzhu.iteye.com/blog/2177923http://blog.csdn.net/zljjava/article/details/9932787 http://www.jianshu.com/p/46e6e03a0d53 https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
最新文章
- Atitit learn by need 需要的时候学与预先学习知识图谱路线图
- php限定时间内同一ip只能访问一次
- CSS常用样式(一)
- android小功能:checkbox使用自己的背景点击切换背景
- 【转】Linux下XenServer管理工具安装
- JavaWeb基础: 会话技术简介
- template_11实参演绎
- (poj)3268 Silver Cow Party 最短路
- EC读书笔记系列之18:条款47、48
- Logistic Regression:银行贷款申请审批实例
- UVa 10473 - Simple Base Conversion
- Java虚拟机原理
- django框架中的form组件的用法
- 淘宝NPM源的使用
- Python之IO模型
- 使用Excel自动生成sql语句
- Python并发解决方案
- Jlink使用技巧之虚拟串口功能
- 匿名内部类访问方法成员变量需要加final的原因及证明(转)
- 善用backtrace解决大问题【转】
热门文章
- 【记录】AutoMapper Project To not support ResolveUsing
- 【记录】VS2012新建MVC3/MVC4项目时,报:此模板尝试加载组件程序集“NuGet.VisualStudio.Interop...”
- 【JVM】JVM系列之内存模型(六)
- CoCreateInstance调用返回代码0x80040154的一种解决方法
- 什么是SARG ?
- 在Hibernate框架中详谈一级缓存
- web api中的RouteHandler
- C++_系列自学课程_第_8_课_指针和引用_《C++ Primer 第四版》
- 小议jQuery插件开发
- B/S结构的流程简单概述