通过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 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 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
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
PHP生成唯一订单号
2015/07/05 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
python快速查找算法应用实例
2014/09/26 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python的scipy实现插值的示例代码
2019/11/12 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Django实现celery定时任务过程解析
2020/04/21 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python执行时间的几种计算方法
2020/07/31 Python
python在地图上画比例的实例详解
2020/11/13 Python
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
J2EE相关知识面试题
2013/08/26 面试题
拉丁舞学习者的自我评价
2013/10/27 职场文书
租赁协议书范本
2014/04/22 职场文书
员工薪酬激励方案
2014/06/13 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书