通过Ajax使用FormData对象无刷新上传文件方法


Posted in Javascript onDecember 08, 2016

写在前面:本文说的这个方案有浏览器兼容性问题;所有主流浏览器的较新版本已经支持这个对象了,比如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移除

②就是本文下面要说的使用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,就到这里了。

FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。

在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明。

但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢?

本文将介绍通过jQuery使用FormData对象上传文件。

使用<form>表单初始化FormData对象方式上传文件

HTML代码

<form id="uploadForm" enctype="multipart/form-data">
 <input id="file" type="file" name="file"/>
 <button id="upload" type="button">upload</button>
</form>

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对象,不需要对数据做处理。
  • <form>标签添加enctype="multipart/form-data"属性。
  • cache设置为false,上传文件不需要缓存。
  • contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。

上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"。

如果不是用<form>表单构造FormData对象又该怎么做呢?

使用FormData对象添加字段方式上传文件

HTML代码

<div id="uploadForm">
 <input id="file" type="file"/>
 <button id="upload" type="button">upload</button>
</div>

这里没有<form>标签,也没有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]中可以看到一个<input type="file">标签能够上传多个文件,只需要在<input type="file">里添加multiple或multiple="multiple"属性。

服务器端读文件

从Servlet 3.0 开始,可以通过 request.getPart() 或 request.getPars() 两个接口获取上传的文件。

这里不多说,详细请参考官网教程 Uploading Files with Java Servlet Technology 以及示例The fileupload Example Application

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.dialogArguments 使用说明
Apr 11 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
js倒计时小实例(多次定时)
Dec 08 #Javascript
详解JavaScript中的属性和特性
Dec 08 #Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 #Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 #Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 #Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 #Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 #Javascript
You might like
提高php运行速度的一些小技巧分享
2012/07/03 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
Vuex入门到上手教程
2018/06/20 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
详解python算法之冒泡排序
2019/03/05 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
外贸英语专业求职信范文
2013/12/25 职场文书
出国考察邀请函
2014/01/21 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
职工小家建设活动方案
2014/08/25 职场文书
交通事故和解协议书
2015/01/27 职场文书
小学新教师个人总结
2015/02/05 职场文书
大队委员竞选稿
2015/11/20 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
解析MySQL binlog
2021/06/11 MySQL
python中__slots__节约内存的具体做法
2021/07/04 Python