如何用jQuery异步上传文件

前言

在现代Web开发中，异步文件上传已经成为一个重要的需求。使用jQuery和HTML5，我们不仅可以实现异步文件上传，还能进行文件验证（如名称、大小和MIME类型），以及使用进度事件来处理上传进度。本文将详细介绍如何使用这些技术来实现文件的异步上传。

实现HTML结构

首先，我们需要一个基础的HTML表单来接受文件输入：

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

文件验证

在处理上传之前，验证文件是一个好习惯。例如，可以在文件选择时进行文件大小验证：

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('最大上传文件大小为1k');
  }

  // 可以进一步验证文件的 .name 和 .type
});

使用`$.ajax()`实现文件上传

接下来，我们使用jQuery的$.ajax()方法来异步上传文件。将文件数据与表单一起提交，并使用XMLHttpRequest来处理上传进度。

$(':button').on('click', function () {
  $.ajax({
    url: 'upload.php',  // 服务器处理上传的脚本
    type: 'POST',

    data: new FormData($('form')[0]),  // 表单数据

    cache: false,
    contentType: false,
    processData: false,

    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

兼容性考虑

使用HTML5的文件API进行异步上传在大部分现代浏览器中都能很好地工作，但需要注意的是，这些特性在某些旧版浏览器中（如IE10以下）不支持。因此，在实际应用中，了解用户群使用的浏览器非常重要。

结论

通过本文的介绍，我们学习到了如何使用jQuery和HTML5进行文件的异步上传，以及如何在上传前进行文件验证和处理上传进度。希望这些信息能帮助您更好地实现文件异步上传功能。

前言

实现HTML结构

文件验证

使用$.ajax()实现文件上传

兼容性考虑

结论

更多资源

使用`$.ajax()`实现文件上传