通过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()
两个接口获取上传的文件。
转载于:https://www.cnblogs.com/bosamvs/p/6022630.html
通过jQuery Ajax使用FormData对象上传文件相关推荐
- JQuery Ajax使用FormData对象上传文件 图片
通过jQuery Ajax使用FormData对象上传文件 FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单" ...
- 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 ...
- 解决python发送multipart/form-data请求上传文件的问题
解决python发送multipart/form-data请求上传文件的问题 参考文章: (1)解决python发送multipart/form-data请求上传文件的问题 (2)https://ww ...
- php js跨域上传文件,Jquery实现跨域异步上传文件步骤详解
这次给大家带来Jquery实现跨域异步上传文件步骤详解,Jquery实现跨域异步上传文件的注意事项有哪些,下面就是实战案例,一起来看一下. 先说明白 这个跨域异步上传功能我们借助了Jquery.for ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例...
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- php flash 图片上传,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- egg.js ajax上传文件,egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名...
一.需求 egg.js 的文件上传个人觉得很一般,内置的 multipart 插件并不怎么好用. egg-multipart 也是基于 co-busboy 实现的. egg 官方给的文件上传的示例地址 ...
- html ajax打包成app,利用HTML5与ajax完成拖拽上传文件
前言 基于ajax的异步模式的上传控件,基本功能如下: 拖拽上传(利用HTML5新增特定 拖拽事件 以及 event的dataTransfer属性) 单文件/多文件切换(利用php实现单/多文件上传) ...
最新文章
- 数据表迁移数据一致性验证
- 非MFC工程中使用MFC库
- 【uni-app】小程序实现微信在线聊天(私聊/群聊)
- 课外知识----浏览器存储技术
- 城市大轰炸++(洛谷P1847题题解,Java语言描述)
- iphone怎么检测屏幕是否被点亮 (用UIApplication的Delegate)
- 多线程进行n皇后计算
- [毕设分享]基于华为eNSP的校园网设计和仿真模拟
- Web前端开发的项目开发流程
- 51 ADC0809八路NTC温度采集系统(代码+仿真,OLED SPI)
- High-Sierra,MacOS10.13,增加IntelHD3000显存的方法
- e900v21e 装第三方_创维e900v21e刷机包
- 电脑连上Jink后打开Altium Designer弹出Failed to measure TotalIRLen(6)
- css样式的补充:鼠标悬停字体变大和改变颜色
- android平板改成电视盒子,【当贝市场】废旧手机改造成电视盒子详细教程
- linux查看web密码,fuel7.0 openstack webui 默认密码查看
- bde连接oracle失败,BDE联接出错,求助
- MFC中picture控件如何响应鼠标移动?
- PHP开发环境配置指南
- Java开发必备:java帮助文档网址下载或在线帮助
热门文章
- 每天二十分钟学习python_每天 3 分钟,小闫带你学 Python(二十五)
- 3d打印 路径规划_在FDM 3D打印中优化刀具路径规划
- xcode4 引入poco库
- Node.js 教程第十三篇——WebSocket
- Threejs javascript 3D建模 框架
- Struts2体系介绍
- Error 2503 and 2502 when installing/uninstalling on Windows 10
- PXE无人值守安装linux后无法启动图形
- ORB-SLAM3: An Accurate Open-Source Library for Visual, Visual-Inertial and Multi-Map SLAM
- resnet的瓶颈层的子层res4b22的命名规则