文件上傳的幾種方法——webuploader篇

Amos 發布于2019-08-20 16:49 / 2181人閱讀

摘要：本來想把這幾種方法放在同一篇寫的，寫完，已經很長了，想想還是分開的比較好。是由團隊開發的一個簡單的以為主為輔的現代文件上傳組件。因為是，就拿著的來用一下選擇文件的按鈕。也可以重寫上傳事件。如果不自動上傳的話，可以通過觸發。

本來想把這幾種方法放在同一篇寫的，寫完xhr，已經很長了，想想還是分開的比較好。
webuploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主,FLASH為輔的現代文件上傳組件。它的兼容性很好，兼容IE6+，IOS6+，Android4+。由于做的系統都要兼容IE8，在用webuploader之前，換過了好幾個組件，都無法滿足需求，比如uploadify無法在header里面添加token（需求其實很簡單，不能隨便拿個組件來用，我嘛很絕望）話說，其實一開始就有試著用webuploader，但是由于某網站上的demo里面的js文件有問題，會報錯（當時項目趕啊，著急啊，就放棄了，后面問了一下獅虎，獅虎也是用webuploader，我就跑官網去下載，就可以了！）果然還是官網靠譜！順便提一下，用webuploader這個項目，文件上傳是上傳到自己的服務器，不是上傳七牛。

先上代碼，這個代碼是用在項目里面之前，寫的一個小demo，參數不齊全。。。（webuploader使用起來很簡單，api也很詳細，去官網看一下就可以上手了）

(function () {
    var uploader = WebUploader.create({

        // swf文件路徑
        swf: "js/Uploader.swf",

        // 文件接收服務端。
        server: "uploadify.php", // 因為是demo，就拿著uploadify的php來用一下

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

        // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！
        resize: false,
        auto: true,
        headers: {"userName": "emi", "token": "123456"}
    });
// 當有文件被添加進隊列的時候，添加到頁面預覽
    uploader.on( "fileQueued", function( file ) {
        $("#thelist").append( "" +
            "" + file.name + "" +
            "等待上傳..." +
            "" );
    });
// 文件上傳過程中創建進度條實時顯示。
    uploader.on( "uploadProgress", function( file, percentage ) {
        var $li = $( "#"+file.id ),
            $percent = $li.find(".progress .progress-bar");

        // 避免重復創建
        if ( !$percent.length ) {
            $percent = $("" +
                "" +
                "" +
                "").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();
    });
})();

項目過程中，我也遇到了一個很普遍的問題（雖然上面代碼里面沒有這個參數，這個參數是指定接受哪些類型的文件），就是文件夾打開特別慢，網上找了一下

accept: {
  title: "Images",
  extensions: "jpg,jpeg,png",
  mimeTypes: "image/*"
}

改成這樣就可以了，親測有效~

accept: {
  title: "Images",
  extensions: "jpg,jpeg,png",
  mimeTypes: "image/jpg,image/jpeg,image/png"   //修改位置
}

可以通過upload對象改參數值，比如uploader.options.server = "服務器路徑"。也可以重寫上傳事件。

如果不自動上傳的話，可以通過upoloader.upload()觸發。

感覺webuploader真心用得順風順水，沒遇到什么問題。實在憋不出什么來。

云服務器 GPU云服務器 js緩存的幾種方法 webuploader文件上傳最基本的幾種 html的幾種輪播

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

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

文件上傳的幾種方法——plupload篇

摘要：然鵝，因為是要上傳到七牛，遇到了跨域的問題，嘗試過網上的幾種解決方法，都沒用。一開始以為是一下子上傳太多張的緣故，就把改為，然鵝還是會報錯。。。其實用這個組件之前，原先是想接著用webuploader的，畢竟用過了，比較熟悉，而且也很好用。然鵝，因為是要上傳到七牛，遇到了跨域的問題，嘗試過網上的幾種解決方法，都沒用。只好用七牛文檔里面的plupload，hhhhhh，官方文檔推薦的，...

mingzhong 2019-08-20 16:49 評論0 收藏0
在Vue項目中使用WebUploader實現文件上傳

摘要：簡介是由團隊開發的一個簡單的以為主，為輔的現代文件上傳組件。采用大文件分片并發上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的...

mindwind 2019-08-02 15:35 評論0 收藏0
在Vue項目中使用WebUploader實現文件上傳

摘要：簡介是由團隊開發的一個簡單的以為主，為輔的現代文件上傳組件。采用大文件分片并發上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的...

endiat 2019-08-26 10:14 評論0 收藏0
在Vue項目中使用WebUploader實現文件上傳

摘要：簡介是由團隊開發的一個簡單的以為主，為輔的現代文件上傳組件。采用大文件分片并發上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的...

funnyZhang 2019-08-30 11:27 評論0 收藏0
WebUploader上傳插件使用說明

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

xbynet 2019-08-29 12:27 評論0 收藏0