WebUploader上傳外掛使用說明

阿新 • • 發佈：2021-12-27

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'
    // 還有其他配置項
});