Ajax发送文件的方法

大家好，关于Ajax，所有的前端工程师应该不会不熟悉吧。它通过异步传输实现低带宽下友好的用户体验。但是目前主流的Ajex调用方法不支持异步上传文件，小沃今天就介绍一下如何实现异步上传文件的方法。

小沃使用的方法是使用html5原生方法XMLHttpRequest();

XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。

XMLHttpRequest 是一个 JavaScript 对象，它最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。而且除了HTTP ,它还支持file 和 ftp 协议。

这个方法的数据源是一个FormData所生成的对象。

生成对象的方法如下：

var fd = new FormData();

然后直接使用fd.append的方式来提交post参数，如：

fd.append('username', 'johndoe');

fd.append('id', 123456);

如果是提交文件类型，请使用

fd.append("file", $('file')[0].files[0]);

需要jquery库支持。

生成XMLHttpRequest();对象的方法如下：

var xhr = new XMLHttpRequest();

下面是这个函数的事件处理方法

xhr.addEventListener('loadstart', function() {//当请求开始时触发

}, true);

xhr.addEventListener('progress', function() {//当响应主体正在下载重复触发（约每隔50ms一次）

}, true);

xhr.addEventListener('abort', function() {//当请求中止时触发

}, true);

xhr.addEventListener('error', function() {//当请求因错误失败时触发。注意404等状态码不是error，因为此时响应仍然是成功完成的。

}, true);

xhr.addEventListener('load', function() {//当请求成功时触发

}, true);

xhr.addEventListener('timeout', function() {//当timeout属性指定的时间已经过去但响应依旧没有完成时触发

}, true);

xhr.addEventListener('loadend', function() {//在请求成功或者失败时触发；load、abort、error、timeout事件发生之后

}, true);

根据需要注册不同的监听函数。

xhr.open('POST', 'index.php?do=uploadfile', true);//是用于打开一个链接的，第三个参数为true说明是非阻塞方式。也就是说判断是否传输完成需要利用回调函数实现。但是执行了open，其实还没有开始正式执行。

xhr.send(fd);//执行了这句话后才开始执行的。

发送ajex后，返回的信息返回到了responseText属性中去。

下面是小沃写的一段代码，请过目：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ajax异步上传文件</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      function upload() {
        var fd = new FormData();
        fd.append("file", $("#file")[0].files[0]);
        var xhr = new XMLHttpRequest();
        xhr.addEventListener('load', function() {
            console.log(xhr.responseText);
        });
        xhr.open('POST', 'index.php?do=uploadfile', true);
        xhr.send(fd);
      }
    </script>
  </head>
  <body>
    <input id="file" name="file"><br />
    <button onclick="upload();">上传</button>
  </body>
</html>