webuploader的一些记录

百度有个webuploader,但是这个东西有点坑人,能用上这个东西都可以需要至少三个小时时间,下面记录我遇到的几个问题

一、如果你上传内容的过程中,你需要附加自己的参数,那么有如下三种方式:

1、初始化的时候直接添加参数

var uploader = new WebUploader.Uploader({
    ...
    formData: {
        id: 1
    }
    ...
},2);

这是全局设置,任何文件上传过程中将都带这个参数

2、绑定uploadBeforeSend事件来给每个独立的文件添加参数

uploader.on( 'uploadBeforeSend', function( block, data ) {
    ...
    data.id= 1;    // 将存在file对象中的md5数据携带发送过去。
    ...
},2);
uploader.on( 'uploadBeforeSend', function( block, data ) {
    // block为分块数据。
    // file为分块对应的file对象。
    var file = block.file;
    // 修改data可以控制发送哪些携带数据。
    data.uid = 123;
});

3、初始化后添加参数(只要在uploader.upload()方法前就行)

uploader.options.formData.uid = 1;

二、按照官方的示例,无论你如何点“开始上传“按钮,都不会有反应,解决办法如下

 $("#ctlBtn").click(function () {
                if ($(this).hasClass('disabled')) {
                    return false;
                };
                uploader.upload();
            });

竟然不写这个事件,看是搞笑不,这也是官方

三、如何从自己的服务端取得服务端处理的结果

从官方的代码中看到如下代码:

 uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).find('p.state').text('已上传');
});

uploader.on( 'uploadError', function( file ) {
    $( '#'+file.id ).find('p.state').text('上传出错');
});

uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
});

这根本就无法接收啊,其实可以这样:

 uploader.on('uploadSuccess', function (file, response) {
                $('#' + file.id).find('p.state').text('已上传');
                alert(response.message);
 });
 public JsonResult ReceiveFile()
        {
            return Json(new
                          {
                              status = -1,
                              message = "。。。。。。"
                          });
        }

以上是MVC服务端的响应,这样客户端就知晓并可以处理了

四、如何控制这些组件的样式

如果使用官方的样式,那么请按照如下顺序(这样能保证样式应用的优先级)引用css文件及js:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<link href="~/Scripts/WebUploader/webuploader.css" rel="stylesheet" />
<link href="~/Scripts/WebUploader/bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/WebUploader/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/Scripts/WebUploader/webuploader.js"></script>
 <div id="uploader" class="wu-example">
            <!--用来存放文件信息-->
            <div id="thelist" class="uploader-list"></div>
            <div class="btns">
                <div id="picker" style="" >选择文件</div>
                <button id="ctlBtn" class="btn btn-default">开始上传</button>
            </div>
</div>

webuploader.js这个文件会根据这段html来生成一些元素:

比如这个class="webuploader-container"及class="webuploader-pick"的元素(节点),如果想控制这个这个“选择文件”按钮的样式,请修改webuploader.css中对应的内容,如果自定义其大小尺寸请用如下css:

  <style type="text/css">
        .webuploader-pick {
            width: 300px !important;
        }
  </style>

点击的有效区域将自动跟随这个大小区域

“开始上传”按钮将由bootstrap-theme.min.css及bootstrap.min.css两个文件共同控制样式

五、当有文件被添加进队列的时候的demo代码有问题

// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
    $list.append( '<div id="' + file.id + '" class="item">' +
        '<h4 class="info">' + file.name + '</h4>' +
        '<p class="state">等待上传...</p>' +
    '</div>' );
});

应该修改为:

            // 当有文件被添加进队列的时候
            uploader.on('fileQueued', function (file) {
                $("#thelist").append('<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                '</div>');
            });









评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值