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实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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缓存类实例
2014/07/18 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python Tensor和Array对比分析
2020/01/08 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
"引用"与指针的区别是什么
2016/09/07 面试题
制药工程专业毕业生推荐信
2013/12/24 职场文书
新学期决心书
2014/03/11 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
假期安全教育广播稿
2014/10/04 职场文书
车间主任岗位职责
2015/02/03 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
秋菊打官司观后感
2015/06/03 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers