通过jQuery Ajax使用FormData对象上传文件
2023-09-11 14:16:36 时间
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
参考
相关文章
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- jquery $.proxy使用 Jquery实现ready()的源码
- jquery中 $ 和 jQuery 及 $() 的区别
- jquery插件--ajaxfileupload.js上传文件原理分析
- Jquery配合Asp.Net无刷新删除指定服务器上的文件!
- javascript使用jQuery加载CSV文件+ajax关闭异步
- [转]jquery 点击表格变为input可以修改无刷新更新数据
- jQuery统计上传文件的大小
- MVC文件上传07-使用客户端jQuery-File-Upload插件和服务端Backload组件裁剪上传图片
- MVC文件上传01-使用jquery异步上传并客户端验证类型和大小
- jquery实现网页自动添加必填项图标和日期自动填充
- 《众妙之门——JavaScript与jQuery技术精粹》——1.8 特定于浏览器的代码就是浪费时间,试试库文件
- 《jQuery移动开发》—— 2.1 语义HTML5
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.2 技巧:用单个HTML文件服务多张页面
- jQuery验证控件jquery.validate.js的使用介绍
- jquery.params.js,Jquery获取页面参数,js获取页面参数
- js,jquery滚动/跳转页面到指定位置
- Jquery_jquery中attr和prop的区别
- Jquery_JQuery之DataTables强大的表格解决方案
- 【网络安全】jquery版本漏洞如何验证
- 通过xhr实现文件上传功能,使用jQuery实现文件上传功能
- 利用Jquery使用HTML5的FormData属性实现对文件的上传