[转] 通过jQuery Ajax使用FormData对象上传文件
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
参考
作者:Agreal
链接:http://www.jianshu.com/p/46e6e03a0d53
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
[转] 通过jQuery Ajax使用FormData对象上传文件的更多相关文章
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- 通过jQuery Ajax使用FormData对象上传文件 (转载)
XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...
- IT轮子系列(四)——使用Jquery+formdata对象 上传 文件
前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...
- .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...
- jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...
- Ajax使用formdata异步上传文件,报错the request was rejected because no multipart boundary was found
基于jQuery的Ajaxs使用FormData上传文件要注意两个参数的设定 processData设为false 把processData设为false,让jquery不要对formData做处理, ...
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
- 利用formdata对象上传文件时,需要添加的参数
function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'h ...
- Vue.js项目中使用 Ajax 和 FormDate 对象上传文件
let param = new FormData(); param.append("paths", this.ruleForm.uploadPath); param.append( ...
随机推荐
- 旋钮QDial
样式: import sys from PyQt5.QtGui import QFont from PyQt5.QtWidgets import QApplication, QWidget, QDia ...
- [洛谷P3948]数据结构 题解(差分)
[洛谷P3948]数据结构 Description 最开始的数组每个元素都是0 给出n,opt ,min,max,mod 在int范围内 A: L ,R ,X 表示把[l,R] 这个区间加上X(数组的 ...
- 为什么还原innobackupex备份后查看到的Executed_Gtid_Set与xtrabackup_binlog_info不一致
基本环境:官方社区版MySQL 5.7.19,innobackupex version 2.4.8 一.什么不一致 1.1.不一致 首先使用下面脚本来构建Executed_Gtid_Set与xtrab ...
- window.location详解
window.location对象常用属性 location.hostname 返回 web 主机的域名 location.host 返回 web 主机的域名(包含端口) location.pathn ...
- Mybatis进阶学习笔记——输出映射
输出映射(例如一个方法的返回至使用什么类型去接收) 1.基本类型 <!-- 统计记录数 --> <select id="queryTotalCount" resu ...
- 20165230田坤烨《网络对抗》Exp1 PC平台逆向破解
实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...
- POI导出带格式的Excel模板——(六)
Jar包
- (原)tensorflow中使用指定的GPU及GPU显存
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6591923.html 参考网址: http://stackoverflow.com/questions ...
- 【API】检查进程是否存在 - CreateToolhelp32Snapshot
1 学习目标 今天静态逆向mydocument病毒时,看到病毒代码为了防止自身被调试会先检测杀毒软件和调试工具的进程是否存在.如果没有杀毒软件则释放真正的病毒文件,提前熟悉一下枚举进程的反汇编代码. ...
- find结合rm删除或mv移动文件的方法
删除过期的备份文件,多用find结合rm方法,可以使用-exec或xargs -exec rm -rf {} \; 或 find /home/mysqlbackup -name "*$thi ...