5款Ajax 文件上传控件

Ajax文件上传控件是很常见的一些Web技术之一，它可以使得网页用户在不刷新页面的情况下上传文件，并且可以在上传的过程中实时显示上传进度。这里我们介绍5款常见的Ajax文件上传控件。

1. AjaxUpload

AjaxUpload是一种轻量级文件上传控件，代码很少，使用也非常简单，只需要用一个额外的JS文件即可。下面是一个简单的演示：

new AjaxUpload('#uploadButton', {
  action: 'upload.php',
  onComplete : function(file, response) {
    alert('上传成功: ' + response);
  }
});

2. Plupload

Plupload是一个基于jQuery的文件上传插件，支持HTML5和Flash两种上传方式，并且可以向服务器上传多个文件。下面是一个简单的演示：

$('#uploader').plupload({
  //路径名
  url: 'upload.php',
  //上传文件的数据类型
  dataType: 'json',
  //最大上传文件
  maxFileSize: '10mb',
  //上传时的进度
  multipart_params: {
    'uploadmode': 'ajaxupload'
  },
  //上传状态
  init: {
    FilesAdded: function(up, files) {
      $('#filelist').html('');
      $.each(files, function(i, file) {
        $('#filelist').append('<div id="' + file.id + '">' +
          file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>');
      });
      up.start();
    },
    UploadProgress: function(up, file) {
      $('#' + file.id + " b").html(file.percent + "%");
    },
    FileUploaded: function(up, file, response) {
      alert('上传成功');
    },
    Error: function(up, err) {
      alert('上传失败');
    }
  }
});

3. FineUploader

FineUploader是一个单独的文件上传控制器，它可以上传多个文件，支持多种浏览器和服务器。它的使用非常简单，下面是一个示例：

$('#fine-uploader').fineUploader({
  request: {
    endpoint: '/server/upload'
  },
  // 用户上传相关的参数，多个参数用逗号隔开
  params: {
    'user': 'guest'
  },
  // 用户选择的文件类型，多个类型用逗号隔开
  // 可以选择的文件类型包括jpeg、png、gif等
  acceptFiles: 'image/*',
  // 文件上传成功后的处理逻辑
  callbacks: {
    onComplete: function(id, name, responseJSON) {
      alert(responseJSON.success);
    }
  }
});

4. Uloadify

Uploadify是一种基于jQuery的文件上传插件，可以自定义上传的文件类型和大小，并且可以实现多文件上传。下面是一个例子：

$(function() {
  $('#file_upload').uploadify({
    'swf': '/uploadify/uploadify.swf',
    'uploader': 'upload.php',
    'auto': false,
    'formData': {
      'folder': '/uploads'
    },
    'fileTypeExts': '*.jpg;*.jpeg;*.gif;*.png',
    'fileSizeLimit': '2MB',
    'multi': true,
    'queueID': 'custom-queue-item',
    'onUploadSuccess': function(file, data, response) {
      alert('上传成功');
    },
    'onUploadError': function(file, errorCode, errorMsg, errorString) {
      alert('上传失败');
    }
  });
});

5. Dropzone

Dropzone是一种非常简单的文件上传控件，它可以上传任意类型和任意大小的文件，并且可以在上传前进行预处理。下面是一个示例：

//以下方式支持传图实现
Dropzone.options.myDropzone = {
  autoProcessQueue: false,
  maxFilesize: 10,
  addRemoveLinks: true,
  acceptedFiles: ".jpeg,.jpg,.png,.gif",
  // Drag and drop区域
  init: function() {
    var submitButton = document.querySelector("#submit-all")
    myDropzone = this;

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue();
    });

    this.on("addedfile", function(file) {

    });

    // 文件上传成功后的逻辑
    this.on("success", function(file, responseText) {
      alert('上传成功');
    });

    // 文件上传失败后的逻辑
    this.on("error", function(file, responseText) {
      alert('上传失败');
    });

    this.on("removedfile", function(file) {

    });
  }
};

以上就是5个常见的Ajax文件上传控件。根据你的需求选择一个合适的上传控件，可以显著提升网站用户的交互体验。