jQuery实现jQuery-form.js实现异步上传文件

要实现 jQuery-form.js 异步上传文件，需要按照以下步骤进行：

步骤一：下载和引入 jQuery-form.js

先从官方 GitHub 地址下载 jQuery-form.js 插件，并将插件文件引入到 HTML 页面中，可以使用以下代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="path/to/jquery.form.js"></script>

其中，第一个脚本是 jQuery 库，也必须先引入。

步骤二：HTML表单构造

实现文件上传需要使用 HTML 表单元素，并且需要添加 enctype="multipart/form-data" 属性。示例代码如下：

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

步骤三：编写 JavaScript 代码

有了表单，就需要用 JavaScript 编写代码实现异步上传。代码示例：

$(document).ready(function() {
  //获取表单元素
  var form = $('#myForm');
  //提交表单时发生以下代码
  form.on('submit', function(e) {
    //阻止表单默认提交行为
    e.preventDefault();
    //将表单数据转化为JS对象
    var formData = new FormData(this);
    //发送异步Post请求
    $.ajax({
      url: form.attr('action'),
      type: 'POST',
      data: formData,
      async: true,
      cache: false,
      contentType: false, //不限制文件类型
      processData: false, //不要处理数据流
      success: function(response) {
        //上传成功后的操作
        alert('上传成功！');
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        //上传失败后的操作
        alert('上传失败！');
      }
    });
  });
});

这段代码中，$('#myForm') 选择的是表单元素，并通过 jQuery 的 .on() 方法监听 submit 事件，来进行提交操作。表单数据是通过 FormData() 对象来获取的。$.ajax() 方法则是用来发送异步请求，并设置了一些特殊的参数。

示例一：使用 HTML5 文件拖放功能上传文件

HTML5 的文件拖放功能可以让用户拖动文件到指定区域完成上传，示例代码如下：

<div id="drop-zone">
  将文件拖到此区域
</div>

<script>
//获取拖动区域元素
var dropZone = $('#drop-zone');

//拖动元素时发生以下代码
dropZone.on('dragover', function() {
  $(this).addClass('hover');
  return false;
});

//取消拖动时发生以下代码
dropZone.on('dragend', function() {
  $(this).removeClass('hover');
  return false;
});

//完成拖拽放置时发生以下代码
dropZone.on('drop', function(e) {
  e.preventDefault();
  $(this).removeClass('hover');
  var files = e.originalEvent.dataTransfer.files;
  var formData = new FormData();
  formData.append('file', files[0]);

  //发送Post异步请求
  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    async: true,
    cache: false,
    contentType: false, //不限制文件类型
    processData: false, //不要处理流数据
    success: function(response) {
      alert('上传成功！');
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert('上传失败！');
    }
  });
});
</script>

示例二：使用 Plupload 插件上传文件

Plupload 是一款优秀的多功能文件上传插件，它支持 HTML5 上传、Flash 上传、Silverlight 上传等多种方式。使用时只需引入 Plupload 插件和 jQuery 库，就可以轻松完成各种文件上传功能。

<script type="text/javascript" src="/scripts/plupload.js"></script>
<script type="text/javascript" src="/scripts/pluploadqueue.js"></script>
<script type="text/javascript" src="/scripts/i18n/zh_CN.js"></script>

<div id="uploader">
  <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>

<script>
var uploader = new plupload.Uploader({
  runtimes: 'html5,flash,silverlight',
  browse_button: 'file-upload',
  max_file_size: '10mb',
  url: '/upload.php',
  flash_swf_url: '/scripts/plupload.flash.swf',
  silverlight_xap_url: '/scripts/plupload.silverlight.xap',
  filters: [{
    title: 'Image files',
    extensions: 'jpg,gif,png'
  }],
  init: {
    PostInit: function() {},
    FilesAdded: function(up, files) {
      uploader.start();
    },
    UploadProgress: function(up, file) {},
    Error: function(up, err) {}
  }
});

uploader.init();
</script>

通过 Plupload 插件，我们可以方便地使用各种文件拖放、多文件选择、断点续传等功能。但是需要注意的是，Plupload 不仅有本身的文件，还会依赖 jQuery 库，需要同时引入。

以上是 jQuery-form.js 实现异步上传文件的完整攻略，包括了几个非常有用的示例。