WebUploader上傳插件使用說明

xbynet 發布于2019-08-29 12:27 / 2005人閱讀

摘要：否則強制轉換成指定的類型。是否要分片處理大文件上傳還有其他配置項上傳事件選擇需要上傳的文件后，文件就會加入文件隊列，并觸發事件上傳進度回調事件，在文件上傳中，多次調用此事件當文件上傳成功時觸發當文件上傳出錯時觸發。

WebUploader簡述

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

分片、并發

預覽、壓縮

多途徑添加文件

MD5驗證

引入文件

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

需要修改下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文件中書寫的結構如下：

選擇文件

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


    選擇文件

初始化配置項

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容器顯示時進行

GPU云服務器云服務器 webuploader文件上傳無插件上傳 js上傳視頻插件 js視頻上傳插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111908.html

WebUploader上傳插件使用說明

摘要：否則強制轉換成指定的類型。是否要分片處理大文件上傳還有其他配置項上傳事件選擇需要上傳的文件后，文件就會加入文件隊列，并觸發事件上傳進度回調事件，在文件上傳中，多次調用此事件當文件上傳成功時觸發當文件上傳出錯時觸發。 WebUploader簡述具有兩套運行時支持：HTML5與FLASH 分片、并發預覽、壓縮多途徑添加文件 MD5驗證引入文件雖然官方沒說必須要引入JQuery...

羅志環 2019-08-20 15:59 評論0 收藏0
WebUploader上傳插件使用說明

摘要：否則強制轉換成指定的類型。是否要分片處理大文件上傳還有其他配置項上傳事件選擇需要上傳的文件后，文件就會加入文件隊列，并觸發事件上傳進度回調事件，在文件上傳中，多次調用此事件當文件上傳成功時觸發當文件上傳出錯時觸發。 WebUploader簡述具有兩套運行時支持：HTML5與FLASH 分片、并發預覽、壓縮多途徑添加文件 MD5驗證引入文件雖然官方沒說必須要引入JQuery...

20171112 2019-08-01 16:41 評論0 收藏0
webuploader 上傳插件上傳文件Error “abort”

摘要：懷疑跨域文件沒上傳完成瀏覽器被刷新上傳文件超過限制大小最終是上傳文件超過限制大小，解決需要同時配置下面三個修改如果是，修改參考文章懷疑：跨域文件沒上傳完成瀏覽器被刷新上傳文件超過限制大小最終是上傳文件超過限制大小，解決需要同時配置下面三個： php修改 php.ini -- upload_max_filesize php.ini -- upload_max_...

tanglijun 2019-07-01 12:21 評論0 收藏0
webuploader 上傳插件上傳文件Error “abort”

摘要：懷疑跨域文件沒上傳完成瀏覽器被刷新上傳文件超過限制大小最終是上傳文件超過限制大小，解決需要同時配置下面三個修改如果是，修改參考文章懷疑：跨域文件沒上傳完成瀏覽器被刷新上傳文件超過限制大小最終是上傳文件超過限制大小，解決需要同時配置下面三個： php修改 php.ini -- upload_max_filesize php.ini -- upload_max_...

qylost 2019-08-20 15:39 評論0 收藏0
webuploader 上傳插件上傳文件Error “abort”

摘要：懷疑跨域文件沒上傳完成瀏覽器被刷新上傳文件超過限制大小最終是上傳文件超過限制大小，解決需要同時配置下面三個修改如果是，修改參考文章懷疑：跨域文件沒上傳完成瀏覽器被刷新上傳文件超過限制大小最終是上傳文件超過限制大小，解決需要同時配置下面三個： php修改 php.ini -- upload_max_filesize php.ini -- upload_max_...

dantezhao 2019-08-01 16:37 評論0 收藏0