jquery Form轻松实现文件上传

下面是详细讲解“jquery Form轻松实现文件上传”的完整攻略：

一、前置条件

在使用 jquery Form 实现文件上传前，你需要在 HTML 页面中引入以下文件：

<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.form/4.3.0/jquery.form.min.js"></script>

二、表单设置

在 HTML 页面中，我们需要添加一个表单来实现文件上传功能。表单需要设置 enctype="multipart/form-data"，这样才能支持文件上传。

<form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>

三、JS代码

在 JS 代码中，我们需要先给表单添加一个 Submit 事件，然后在 Submit 事件中使用 jquery Form 提供的 ajaxSubmit() 方法实现文件上传。

1. 基本用法

$('#uploadForm').submit(function() { //给表单添加 Submit 事件
  $(this).ajaxSubmit({ //使用 ajaxSubmit() 方法实现文件上传
    success: function(data) {
      alert('上传成功');
    },
    error: function(xhr) {
      alert('上传失败');
    }
  });
  return false; //阻止表单默认提交行为
});

以上代码只是一个最基本的使用，ajaxSubmit() 方法中可以用到的参数还有很多，例如 beforeSubmit、resetForm、clearForm 等等，在实际使用中，可以根据具体情况灵活应用。

2. 添加进度条

如果需要在文件上传的过程中显示上传进度条，可以使用 jquery Form 提供的 uploadProgress 参数来实现。

$('#uploadForm').submit(function() {
  $(this).ajaxSubmit({
    beforeSubmit: function(formData, jqForm, options) {
      var percentVal = '0%';
      var progress = $('#progressBar');
      progress.width(percentVal)
        .html(percentVal);
      progress.parent().show();
    },
    uploadProgress: function(event, position, total, percentComplete) {
      var percentVal = percentComplete + '%';
      var progress = $('#progressBar');
      progress.width(percentVal)
        .html(percentVal);
    },
    success: function(data) {
      var percentVal = '100%';
      var progress = $('#progressBar');
      progress.width(percentVal)
        .html(percentVal);
      alert('上传成功');
      progress.parent().hide();
    },
    error: function(xhr) {
      var percentVal = '0%';
      var progress = $('#progressBar');
      progress.width(percentVal)
        .html(percentVal);
      alert('上传失败');
      progress.parent().hide();
    }
  });
  return false;
});

以上代码中，我们添加了一个进度条，使用一个 div 元素来实现。在表单提交之前，我们设置进度条宽度为0，并显示出来；在上传中，通过 uploadProgress 参数来更新上传进度；在上传成功或失败后，我们隐藏进度条。

四、示例说明

1. 文件上传

在第一段 JS 代码的基础上，我们给出一个文件上传的示例。用户选择文件后，点击提交按钮，即可上传。

<div class="upload-box">
  <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
    <input type="file" name="file">
    <input type="submit" value="上传">
  </form>
  <div class="progress-box" style="display:none;">
    <div id="progressBar" class="progress-bar"></div>
  </div>
</div>

<script>
  $('#uploadForm').submit(function() {
    $(this).ajaxSubmit({
      beforeSubmit: function(formData, jqForm, options) {
        var percentVal = '0%';
        var progress = $('#progressBar');
        progress.width(percentVal)
          .html(percentVal);
        progress.parent().show();
      },
      uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        var progress = $('#progressBar');
        progress.width(percentVal)
          .html(percentVal);
      },
      success: function(data) {
        var percentVal = '100%';
        var progress = $('#progressBar');
        progress.width(percentVal)
          .html(percentVal);
        alert('上传成功');
        progress.parent().hide();
      },
      error: function(xhr) {
        var percentVal = '0%';
        var progress = $('#progressBar');
        progress.width(percentVal)
          .html(percentVal);
        alert('上传失败');
        progress.parent().hide();
      }
    });
    return false;
  });
</script>

2. 多文件上传

在第一段 JS 代码中，我们已经实现了一个文件上传的示例。如果需要上传多个文件，只需要稍微修改一下 HTML 和 JS 代码即可。

<div class="upload-box">
  <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
    <input type="file" name="file" multiple>
    <input type="submit" value="上传">
  </form>
  <div class="progress-box" style="display:none;">
    <div id="progressBar" class="progress-bar"></div>
  </div>
</div>

<script>
  $('#uploadForm').submit(function() {
    $(this).ajaxSubmit({
      beforeSubmit: function(formData, jqForm, options) {
        var percentVal = '0%';
        var progress = $('#progressBar');
        progress.width(percentVal)
          .html(percentVal);
        progress.parent().show();
      },
      uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        var progress = $('#progressBar');
        progress.width(percentVal)
          .html(percentVal);
      },
      success: function(data) {
        var percentVal = '100%';
        var progress = $('#progressBar');
        progress.width(percentVal)
          .html(percentVal);
        alert('上传成功');
        progress.parent().hide();
      },
      error: function(xhr) {
        var percentVal = '0%';
        var progress = $('#progressBar');
        progress.width(percentVal)
          .html(percentVal);
        alert('上传失败');
        progress.parent().hide();
      }
    });
    return false;
  });
</script>

以上代码中，我们只需要在 HTML 中给 input 标签添加 multiple 属性来支持多文件上传，在 JS 代码中并没有什么区别。