jquery使用FormData实现异步上传文件

2018-10-25 36 Orange_J

考虑一个常见的用户上传头像的场景:

  • 点击按钮,弹出文件选择框
  • 选中图片并确认后直接上传图片

实现这个功能,需要使用<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实现frame之间互通的方法
Jun 26 40
springmvc接收jquery提交的数组数据代码分享
Oct 28 39
Jquery实现无缝向上循环滚动列表的特效
Feb 13 53
jQuery选择器之层次选择器用法实例分析
Feb 19 43
使用JQuery自动完成插件Auto Complete详解
Jun 18 31
jquery实现直播弹幕效果
Nov 28 37
jquery实现的放大镜效果示例
Feb 24 158
手机访问当前页面