AJAX的采纳标志着的Web历史上的一个庞大奔腾。与Web服务器通讯而不须要从新加载页面的才能已改变了Web应用顺序构建。动态网站的观点构成今后，AJAX(XMLHttpRequests) 手艺发展迅速。
近年来XMLHttpRequests增加了一个很好的功用来处置惩罚文件上传。传统上，很多开发者用其他手艺如Flash上传文件到服务器。这类要领的问题是，用户须要装置第三方浏览器插件的。
在这篇文章中你会学到怎样用JavaScript手艺将文件上传到服务器。我们将教你一个要求上传多文件的例子。但是，你能够用一样的方法上传单个文件。
让我们最先吧！

选摘要上传的文件

你须要做的第一件事就是竖立你的HTML表单让用户挑选文件。让事变简朴，我们用规范的<input>元素并设为file范例。

<form id="file-form" action="handler.php" method="POST">
  <input type="file" id="file-select" name="photos[]" multiple/>
  <button type="submit" id="upload-button">Upload</button>
</form>

请注意，<input>元素有个multiple属性。这将许可用户经由过程浏览器文件挑选器挑选多个文件。假如你不指定此属性的用户只能挑选一个文件。
如今你的HTML表格建好了，我们再看看处置惩罚文件上传的JavaScript代码。

上传文件到服务器

起首你须要建立三个变量来猎取HTML里的<form>，<input>，<button>元素。

var form = document.getElementById('file-form');
var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('upload-button');

下一步你须要绑定一个事宜监听器到表单的onsubmit事宜。

form.onsubmit = function(event) {
  event.preventDefault();

  // 更新按钮里的笔墨
  uploadButton.innerHTML = 'Uploading...';

  // 其他的代码将在这里...
}

在事宜监听器里，起首挪用event对象的preventDefault()。这将阻挠浏览器提交的表单，使我们能够继承处置惩罚Ajax文件上传。
下一步，更新的uploadButton的innerHTML属性为Uploading...，这通知用户文件上传中。
接下来，从<input>元素中猎取[FileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)内容并存储到变量里。你能够经由过程接见files属性来做到这点。

// 猎取挑选的文件
var files = fileSelect.files;

然后建立一个新的[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)对象。这是用来吸收Ajax要求猎取的键/值对数据。

// 建立一个FormData对象
var formData = new FormData();

然后，经由过程轮回猎取files数组的每一个文件内容，并将它们增加到你适才建立的formData对象里。你或许还想搜检用户选的文件是不是是你划定的文件范例。

// 对每一个文件举行轮回处置惩罚
for (var i = 0; i < files.length; i++) {
  var file = files[i];

  // 搜检文件范例
  if (!file.type.match('image.*')) {
    continue;
  }

  // 增加文件到formData
  formData.append('photos[]', file, file.name);
}

在这里，你先读取当files数组里的一切文件，然后搜检以确保它是图象。该文件的type属性将返回一个字符串的文件范例。你能够运用JavaScript的 match()要领来确保这个字符串婚配所需的范例。假如文件范例不婚配，经由过程挪用continue跳过背面的语句完毕本轮轮回。
然后运用append()要领把文件增加到formData对象里。

注：

FormData.append()要领用于处置惩罚Files，Blobs，或Strings。

// Files
formData.append(name, file, filename);

// Blobs
formData.append(name, blob, filename);

// Strings
formData.append(name, value);    

第一个参数指定数据项的name。这将构成数据的key。第二个参数指定一个File、 Blob或许 String作为数据数据的value。当增加一个File或 Blob，能够指定一个filename文件名，但这不是必须的。

下一步你须要设置XMLHttpRequest与服务器通讯。你起首须要建立一个新的XMLHttpRequest对象。

// 设置要求。
var xhr = new XMLHttpRequest();

如今您须要建立一个新衔接到服务器。你运用open要领。该要领带三个参数。HTTP的要求体式格局、url和一个布尔值(肯定是不是应处置惩罚异步要求)。

// 翻开衔接。
xhr.open('POST', 'handler.php', true);

下一步你须要竖立一个事宜侦听器，onLoad事宜完成后就会触发时。xhr对象的status属性会通知你要求是不是胜利完成。

// 要求完成时竖立一个处置惩罚顺序。
xhr.onload = function () {
  if (xhr.status === 200) {
    // File(s) uploaded.
    uploadButton.innerHTML = 'Upload';
  } else {
    alert('An error occurred!');
  }
};

剩下要做的是发送要求。用xhr的send要领发送formData。

// 发送数据。
xhr.send(formData);

这就是最先运用Ajax文件上传的内容。您的服务器端代码须要提取文件并处置惩罚。

浏览器的支撑

浏览器支撑总体上是好的。Internet Explorer是唯一的破例。IE 10及以上的版本支撑，但初期版本的IE不支撑本文提到的一些XMLHttpRequest功用。

总结

在这篇文章中你学到了怎样上传文件运用当地JavaScript手艺，Web服务器。在功用方面的提高，消弭XMLHttpRequests供开发者运用第三方浏览器插件来处置惩罚文件上传的须要。这是很好的为当地的浏览器功用往往是更快和更比一个插件供应的平安。
你设计在你的项目中运用Ajax上传的文件？请在下面的批评中分享你的主意。

英文原文
本文地点