通过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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
瀑布流布局代码一例
Apr 11 Javascript
javascript文本模板用法实例
Jul 31 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
vue-cli中的webpack配置详解
Sep 25 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
使用javascript做在线算法编程
May 25 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Python函数参数操作详解
2018/08/03 Python
python3实现逐字输出的方法
2019/01/23 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Python函数式编程实例详解
2020/01/17 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
保时捷设计:Porsche Design
2019/03/30 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
给物业的表扬信
2014/01/21 职场文书
公司合作协议书范本
2014/04/18 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
谢师宴家长致辞
2015/07/27 职场文书
企业财务管理制度范本
2015/08/04 职场文书
请假条应该怎么写?
2019/06/24 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python