WebUploader上傳插件使用說明

WebUploader簡述

• 具有兩套運行時支持：HTML5與FLASH

• 分片、並發

• 預覽、壓縮

• 多途徑添加文件

• MD5驗證

引入文件

• 雖然官方沒說必須要引入JQuery庫，但實際上需要引入

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夾/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="js/jquery.min.js" ></script> <script type="text/javascript" src="webuploader文件夾/webuploader.js"></script> <!--SWF在初始化的時候指定，在后面將展示-->

需要修改下webuploader.css

• 需要修改的地方：把.webuploader-pick中的display:inline-block樣式去掉

上傳分類

• 圖片上傳：單圖上傳 多圖上傳

• 文件上傳

Webuploader初始化

• 使用WebUploader.create方法來初始化

var uploader = new WebUploader.Uploader({
    //加載swf文件
    swf: 'path_of_swf/Uploader.swf'

    // 其他配置項
    // 文件接收服務端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

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

    // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！
    resize: false
});

 

HTML結構

• 在HTML文件中書寫的結構如下：

<div id="picker">選擇文件</div>

• 渲染之后得到的HTML結構如下：

<div id="picker" class="webuploader-container">
    <div class="webuploader-pick">選擇文件</div>
    <div id="rt_rt_1beac1omvmdp1mvd1ja91oap1pvm1" style="position: absolute; top: 0px; left: 0px; width: 94px; height: 38px; overflow: hidden; bottom: auto; right: auto;">
        <input type="file" capture="camera" name="file" class="webuploader-element-invisible" multiple="multiple">
        <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
    </div>
</div>

 

初始化配置項

var uploader = new WebUploader.Uploader({
    // 加載swf文件
    swf: 'path_of_swf/Uploader.swf'

    // 接收文件的服務端地址。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

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

    // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！
    resize: false，
    // 是否自動上傳
    auto: true,
    // 指定接受哪些類型的文件
    accept：{
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    // 配置生成縮略圖的選項
    thumb: {
        width: 110,
        height: 110,

        // 圖片質量，只有type為`image/jpeg`的時候才有效。
        quality: 70,

        // 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false.
        allowMagnify: true,

        // 是否允許裁剪。
        crop: true,

        // 為空的話則保留原有圖片格式。
        // 否則強制轉換成指定的類型。
        type: 'image/jpeg'
    },
    // 是否要分片處理大文件上傳
    chunked: true,
    method: 'POST'
    // 還有其他配置項
});

 

WebUploader上傳事件

• fileQueued
  選擇需要上傳的文件后，文件就會加入文件隊列，並觸發fileQueued事件

• uploadProgress
  上傳進度回調事件，在文件上傳中，多次調用此事件

• uploadSuccess
  當文件上傳成功時觸發

• uploadError
  當文件上傳出錯時觸發。

• uploadComplete
  不管成功或者失敗，文件上傳完成時觸發。

• error
  如果是3種情況就會觸發：
  1、文件數量超出
  2、文件總大小超出
  3、文件類型不滿足

• uploadFinished
  當所有文件上傳結束時觸發

• 上傳成功的事件觸發順序
  

• 上傳失敗的事件觸發順序
  

注意事項

• 當要作為上傳控件的html容器一開始是隱藏的話，初始化應該放在html容器顯示時進行