webuploader 上傳文件參數設置

webUploader 是款很好用的優秀的開源上傳組件，由百度公司開發，詳細的介紹可參見webUploader 的官方文檔：

最近在使用webUploader時，需要添加額外的參數，並在后台獲取，參數的格式是json，剛開始一直設置不對，在參考了官網的api文檔及相關熱心網友的回答后，終於弄明白了webUploader 上傳參數的設置。設置的方法一般是在uploader 對象創建后的 fileQueued  或 uploadBeforeSend 事件 中設置 ，也可以對webUploader 對象的屬性 formData 進行直接 設置。

具體如下 ：

    uploader = WebUploader.create({
                    auto: false,
                    // swf文件路徑
                    swf: '/Scripts/webUploader/Uploader.swf',

                    // 文件接收服務端。
                    server: '@Url.Action("Upload", "Home")',

                    // 選擇文件的按鈕。可選。
                    // 內部根據當前運行是創建，可能是input元素，也可能是flash.
                    pick: '#myPicker',

                   // formData: { "name": name, "desc": desc},
               
                    prepareNextFile:true,
                    chunked: true,  // 分片上傳大文件
                    chunkRetry: 10, // 如果某個分片由於網絡問題出錯，允許自動重傳多少次？
                    thread: 100,// 最大上傳並發數
                    method: 'POST',
                    fileSizeLimit: 1024,

                    // 只允許選擇圖片文件。
                    accept: {
                        title: 'HTML5組態文件',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                       mimeTypes: 'img/*'
                    }

                });

		5
6
7
8
9
10
11
12
13
 

//當文件被加入隊列之前觸發
uploader.on('beforeFileQueued', function (file) {
    //如果是單文件上傳，把舊的文件地址傳過去
    if (!p.multiple) {
        if (p.sendurl.indexOf("action=itemcode") > 0) {
            if ($("#txtItemCode").val() == '') {
                layer.msg('請先填寫商品編碼再上傳圖片！');
                //layer.alert('請先填寫商品編碼再上傳圖片！');
                return false;
            }
        data.formData= { "name": name, "desc": desc};
        }
    }
    }); 


                uploader.on('fileQueued', function (file) {
                    $("#listFile").append('<div id="' + file.id + '" class="item">' +
                        '<h4 class="info">' + file.name + '</h4>' +
                        '<p class="state">等待上傳...</p>' +
                    '</div>');
                });

                uploader.on('uploadProgress', function (file, percentage) {
                    var li = $('#' + file.id),
                        percent = li.find('.progress .progress-bar');
                    // 避免重復創建
                    if (!percent.length) {
                        percent = $('<div class="progress progress-striped active">' +
                          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                          '</div>' +
                        '</div>').appendTo(li).find('.progress-bar');
                    }
                    li.find('p.state').text('上傳中');
                    percent.css('width', percentage * 100 + '%');
                });

                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();
                    //$("#editModal").fadeOut(2000, window.location.reload());
                    //destory();
                    //$("#editModal").destory();
                });


                //當某個文件的分塊在發送前觸發，主要用來詢問是否要添加附帶參數，大文件在開起分片上傳的前提下此事件可能會觸發多次。

                uploader.on('uploadBeforeSend', function (obj, data, headers) {
                   // data.DelFilePath = parentObj.siblings(".upload-path").val();
                   //  data.ItemCode = $("#txtItemCode").val();
		     data.formData= { "name": name, "desc": desc};
                });

                uploader.on('all', function (type) {
                    if (type === 'startUpload') {
                        state = 'uploading';
                    } else if (type === 'stopUpload') {
                        state = 'paused';
                    } else if (type === 'uploadFinished') {
                        state = 'done';
                    }
                    if (state === 'uploading') {
                        $('#btnBeginUpload').text('暫停上傳');
                    } else {
                        $('#btnBeginUpload').text('開始上傳');
                    }
                });

            } else {
                geap.alertPostMsgDefault("請選擇一個文件!", "info");
            }
        });


   // 點擊上傳事件 

  $('#btnSave').bind('click', function () {
           var  name = $("#txtName").val();
           var  id = $("#txtId").val();

             if (!name || name.length == 0) {
                 alert("請填寫名稱");
                 return false;
             }
            var obj = new Object();
            obj.name = name;
            obj.id = id;
            uploader.options.formData = obj;
          //  uploader.options.formData = { "name": name, "id": id, };
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });