jQuery File Upload 多文件 单击选中或多选文件直接自动上载 无需提交按钮

jQuery-File-Upload

插件地址：https://github.com/blueimp/jQuery-File-Upload

HTML，激活 fileupload 按钮，你可以用  CSS 绘制你喜欢的效果

<button οnclick="$('#fileupload').click();">
	select file ...
</button>

HTML，页码上放置一个文件选择类型的控件，隐藏形式(display: none)，如果服务端是 struts2，那么 name="upload" 很重要，如果是 servlet 或其它则无所谓。

<input id="fileupload" type="file" name="upload" multiple style='display: none'>

javascript

    $('#fileupload').fileupload(
    {
      url : 'struts/image/UploadFile',
      type : 'post',
      dataType : 'json',
      autoUpload : true,
      formData : [
      {} ],
      done : function(e, data)
      {
        console.debug(data.result);
        //
        var object = JSON.parse(data.result);
        var image = new Image(object.image.id, object.image.assetId, object.image.assetXml, object.image.url, object.image.type);

        console.log('image formUploadFileUser success,' + image);
      },
      progressall : function(e, data)
      {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        console.log(progress + '%', data.loaded, data.total);
      },
      fail : function(e, data)
      {
        console.log('fileupload, fail', e, data);
      }
    }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

事件定义：

$('#fileupload')
    .bind('fileuploadadd', function (e, data) {/* ... */})
    .bind('fileuploadsubmit', function (e, data) {/* ... */})
    .bind('fileuploadsend', function (e, data) {/* ... */})
    .bind('fileuploaddone', function (e, data) {/* ... */})
    .bind('fileuploadfail', function (e, data) {/* ... */})
    .bind('fileuploadalways', function (e, data) {/* ... */})
    .bind('fileuploadprogress', function (e, data) {/* ... */})
    .bind('fileuploadprogressall', function (e, data) {/* ... */})
    .bind('fileuploadstart', function (e) {/* ... */})
    .bind('fileuploadstop', function (e) {/* ... */})
    .bind('fileuploadchange', function (e, data) {/* ... */})
    .bind('fileuploadpaste', function (e, data) {/* ... */})
    .bind('fileuploaddrop', function (e, data) {/* ... */})
    .bind('fileuploaddragover', function (e) {/* ... */})
    .bind('fileuploadchunksend', function (e, data) {/* ... */})
    .bind('fileuploadchunkdone', function (e, data) {/* ... */})
    .bind('fileuploadchunkfail', function (e, data) {/* ... */})
    .bind('fileuploadchunkalways', function (e, data) {/* ... */});

如果提交文件时还需要提交其他文本信息，举例如下：

$('#fileupload').bind('fileuploadsubmit', function(e, data)
{
  var str1 = 'hello';
  var str2 = 'world';

  data.formData =
  {
    param1 : str1,
    param1 : str2,
  };
});

https://github.com/blueimp/jQuery-File-Upload

这里还有更多的例子与相应的文档介绍。