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加密密码到cookie的实现代码
Apr 18 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery实现聊天机器人
Feb 08 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
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
详解jQuery事件
2017/01/13 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
售前工程师职业生涯规划
2014/03/02 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
离职证明格式样本
2015/06/12 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书