使用FormData实现异步上传文件
来源:互联网 发布:源码小偷 编辑:程序博客网 时间:2024/05/27 21:47
考虑一个常见的用户上传头像的场景:
- 点击按钮,弹出文件选择框
- 选中图片并确认后直接上传图片
实现这个功能,需要使用<input>
来添加文件,并实现上传功能。传统的上传文件是将<input>
放到<form>
中提交,但在这个场景中并不存在form表单,只有一个input
而已。那么应该如何处理呢?
答案是可以使用FormData
来实现文件的提交。
先看一下MDN对FormData
的介绍:
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
这样一来,解决问题的思路就出来了:
- 每次选中文件并确认后,
<input>
会触发change
事件,在onchange
事件处理函数中处理即可。 - 创建一个
FormData
对象,并将选中的文件追加进去。 - 使用Ajax发送这个
FormData
对象。
下面用一个Demo展示具体的代码实现用FormData
将文件发送到一个php:
<html><head> <title>Upload</title> <meta charset="utf-8"></head><body> <input id="file-input" type="file"> <script> var input = document.getElementById('file-input'); input.onchange = function () { var data = new FormData(); data.append('file', input.files[0]); var request = new XMLHttpRequest(); request.open('POST', './upload.php'); request.send(data); }; </script></body></html>
阅读全文
0 0
- 使用FormData实现异步上传文件
- 使用H5的formData对象实现文件的异步上传
- javascript 使用FormData实现图片/文件异步上传
- 利用html5-formdata实现文件异步上传
- FormData实现文件的异步上传
- FormData对象异步上传文件
- 前端使用FormData实现上传文件
- 使用FormData上传文件
- 使用FormData上传文件
- 使用formData上传文件
- 用FormData实现无刷新页面异步上传文件
- 使用FormData对象ajax异步方式上传图片,文件
- FormData 实现文件上传实例
- Jquery FormData文件异步上传 快速指南
- formdata异步上传图片(文件)
- ajax+formData多文件异步上传
- 使用FormData单独上传文件
- EXTJS使用H5 formdata实现多文件上传
- Java:String和Date、Timestamp之间的转换
- CSDN-Markdown的字体、字号、颜色编辑
- 优质内容-FM听广播
- java向上与向下转型
- java中jar包出错
- 使用FormData实现异步上传文件
- EqualsBuilder和HashCodeBuilder
- 5分钟让你明白“软链接”和“硬链接”的区别
- CCPC 2017 哈尔滨 F题
- CSS3结合jQuery实现动画效果及回调函数
- day26—OracleSQL 中建表、约束、库和表的设计原则
- oAuth2.0协议
- Inventory文件
- Android String字符串去除指定两个字符串范围内的字符