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查找dom的几种方法效率详解
May 17 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 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
用PHP实现验证码功能
2006/10/09 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP中串行化用法示例
2016/11/16 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python复制文件的方法实例详解
2015/05/22 Python
深入理解Python中的*重复运算符
2017/10/28 Python
python版DDOS攻击脚本
2019/06/12 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
实习会计求职自荐信范文
2014/03/10 职场文书
市政管理求职信范文
2014/05/07 职场文书
入党转正申请报告
2015/05/15 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python