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

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值