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源码】
Apr 10 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jquery制作的移动端购物车效果完整示例
Feb 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重新实现PHP脚本引擎内置函数
2007/03/06 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
newxtree.js代码
2007/03/13 Javascript
Javascript倒计时代码
2010/08/12 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
2014年商场国庆节活动策划方案
2014/09/16 职场文书
加强作风建设心得体会
2014/10/22 职场文书
公司酒会主持词
2015/07/02 职场文书
vue首次渲染全过程
2021/04/21 Vue.js