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

jQuery-File-Upload

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

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

<button onclick="$('#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
这里还有更多的例子与相应的文档介绍。