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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
使用jQuery实现掷骰子游戏
Oct 24 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函数in_array()使用详解
2014/08/20 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
python mysqldb连接数据库
2009/03/16 Python
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python增加图像对比度的方法
2019/07/12 Python
python list转置和前后反转的例子
2019/08/26 Python
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
党校学习自我鉴定
2014/02/24 职场文书
护士毕业实习感言
2014/03/05 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
项目建议书范文
2014/05/12 职场文书
煤矿安全承诺书
2014/05/22 职场文书
企业环保标语
2014/06/10 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
运动会通讯稿50字
2015/07/20 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript