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,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 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设计模式  Command(命令模式)
2011/06/17 PHP
PHP实现微信退款功能
2018/10/02 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
javascript解析json实例详解
2014/11/05 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
毕业生学校推荐信范文
2014/05/21 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
医药销售自我评价200字
2014/09/11 职场文书
欢迎家长标语
2014/10/08 职场文书
爱国主义主题班会
2015/08/14 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
我去timi了,一起去timi是什么意思?
2022/04/13 杂记