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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现简单轮播图效果
Dec 27 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中取得URL的根域名的代码
2011/03/23 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php二维数组排序详解
2013/11/06 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
详解python中的数据类型和控制流
2019/08/08 Python
python numpy数组中的复制知识解析
2020/02/03 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
护士辞职信怎么写
2015/02/27 职场文书
物业公司管理制度
2015/08/05 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers