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 相关文章推荐
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现本地存储
Dec 22 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 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
详解js中==与===的区别
2017/01/08 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python随机模块random使用方法详解
2020/02/14 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
详解Python IO编程
2020/07/24 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
C++程序员求职信
2014/05/07 职场文书
如何在C++中调用Python
2021/05/21 Python
Python列表的索引与切片
2022/04/07 Python