JQuery Ajax使用FormData对象上传文件 图片
通过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
参考
- https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
- http://stackoverflow.com/questions/10292382/html-5-formdata-and-java-servlets
- https://docs.oracle.com/javaee/7/tutorial/servlets011.htm#BABFGCHB
- https://docs.oracle.com/javaee/7/tutorial/servlets016.htm#BABDGFJJ
扫描屏二维码或直接搜索,可以关注 我的前端公众号 :前端你别闹
JQuery Ajax使用FormData对象上传文件 图片相关推荐
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
- jQuery+php+ajax实现无刷新上传文件功能
2019独角兽企业重金招聘Python工程师标准>>> jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码: &l ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- 解决python发送multipart/form-data请求上传文件的问题
解决python发送multipart/form-data请求上传文件的问题 参考文章: (1)解决python发送multipart/form-data请求上传文件的问题 (2)https://ww ...
- php js跨域上传文件,Jquery实现跨域异步上传文件步骤详解
这次给大家带来Jquery实现跨域异步上传文件步骤详解,Jquery实现跨域异步上传文件的注意事项有哪些,下面就是实战案例,一起来看一下. 先说明白 这个跨域异步上传功能我们借助了Jquery.for ...
- JAVA上传文件图片到服务器保存
这里我记录一个比较简单方便操作的JAVA上传文件图片到服务器并且保存! 首先是页面 html的 我这是提交一个文件和类型 <div style="border: 1px solid ...
- 使用Node.js express 开发上传文件/图片api接口
我是傲夫靠斯,欢迎关注我的公众号[前端工程师的自我修养],每天更新. 今天我们来搞一个Node.js Express的上传文件功能,我使用了busboy这个库. Busboy是一个基于事件的文件流解析 ...
- 七牛云 vue 图片上传简单解说,js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片 一.七牛云简介 首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
- java上传文件图片到服务器保存,Java上传文件图片到服务器的方法
这里我记录一个比较简单方便操作的java上传文件图片到服务器并且保存,具体内容如下 首先是页面html的 我这是提交一个文件和类型 我是添加一张临时图片得到微信的media_id保存数据库! en ...
最新文章
- 2022-2028年中国电容器用薄膜行业市场研究分析及投资前景展望报告
- java 底层运行_从表面到底层丨Java和JVM的运行原理,现在带给你
- c/c++宏函数的定义与使用(宏定义函数)(macro definition)
- Qt时间轴QTimeLine的基本用法
- mac osx 上Eclipse/CDT问题及解决方案
- Java 面试之语言基础
- 慕尼黑大学公开课 Competitive Strategy(竞争策略)总结
- Spring Boot(4)--- spring boot的三种启动方式
- HDOJ2026 ( 首字母变大写 ) 【水题】
- Taro开发微信小程序遇到的问题和解决方法
- composer:php的依赖管理工具
- pyspark的用法
- Caffe学习:pycaffe利用caffemodel进行分类=裁剪图片
- 不要问我有多懒,写个脚本跑django
- 数据血缘关系图 工具_QCSPCChart SPC控制图工具,QCSPCChart SPC精湛而轻松
- ISO27145协议解析
- 应用程序无法正常启动(0x000007b)或者找不到dll文件(以vcruntime140d.dll为例)的原因原理分析和解决方法(亲测已解决)
- 工地信息化——施工现场网格化管理系统实施小记
- 思维模型 MECE原则
- 垃圾分类小程序,识别和站点查询,答题,用户后台管理集一体的小程序