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>');
            });