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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jquery实现简易验证插件封装
Sep 13 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
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
javascript 模拟点击广告
2010/01/02 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
更新修改后的Python模块方法
2019/03/03 Python
Python测试模块doctest使用解析
2019/08/10 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
大学毕业生简单自荐信
2013/11/05 职场文书
机械电子工程专业推荐信范文
2013/11/20 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL
小程序自定义轮播图圆点组件
2022/06/25 Javascript