jquery使用FormData实现异步上传文件


Posted in jQuery onOctober 25, 2018

考虑一个常见的用户上传头像的场景:

  • 点击按钮,弹出文件选择框
  • 选中图片并确认后直接上传图片

实现这个功能,需要使用<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
纯jQuery实现前端分页功能
Mar 23 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 #jQuery
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
jquery实现动态添加附件功能
Oct 23 #jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
You might like
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
浅谈Webpack打包优化技巧
2018/06/12 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
详解Python当中的字符串和编码
2015/04/25 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python实现列表的排序方法分享
2019/07/01 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
招商经理岗位职责
2013/11/16 职场文书
校运会口号
2014/06/18 职场文书
2014年计生标语
2014/06/23 职场文书
给老师的感谢信
2015/01/20 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书