成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Amos / 2276人閱讀

摘要：本來(lái)想把這幾種方法放在同一篇寫(xiě)的，寫(xiě)完，已經(jīng)很長(zhǎng)了，想想還是分開(kāi)的比較好。是由團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以為主為輔的現(xiàn)代文件上傳組件。因?yàn)槭牵湍弥膩?lái)用一下選擇文件的按鈕。也可以重寫(xiě)上傳事件。如果不自動(dòng)上傳的話，可以通過(guò)觸發(fā)。

本來(lái)想把這幾種方法放在同一篇寫(xiě)的，寫(xiě)完xhr，已經(jīng)很長(zhǎng)了，想想還是分開(kāi)的比較好。
webuploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主,FLASH為輔的現(xiàn)代文件上傳組件。它的兼容性很好，兼容IE6+，IOS6+，Android4+。由于做的系統(tǒng)都要兼容IE8，在用webuploader之前，換過(guò)了好幾個(gè)組件，都無(wú)法滿足需求，比如uploadify無(wú)法在header里面添加token（需求其實(shí)很簡(jiǎn)單，不能隨便拿個(gè)組件來(lái)用，我嘛很絕望）話說(shuō)，其實(shí)一開(kāi)始就有試著用webuploader，但是由于某網(wǎng)站上的demo里面的js文件有問(wèn)題，會(huì)報(bào)錯(cuò)（當(dāng)時(shí)項(xiàng)目趕啊，著急啊，就放棄了，后面問(wèn)了一下獅虎，獅虎也是用webuploader，我就跑官網(wǎng)去下載，就可以了?。┕贿€是官網(wǎng)靠譜！順便提一下，用webuploader這個(gè)項(xiàng)目，文件上傳是上傳到自己的服務(wù)器，不是上傳七牛。

先上代碼，這個(gè)代碼是用在項(xiàng)目里面之前，寫(xiě)的一個(gè)小demo，參數(shù)不齊全。。。（webuploader使用起來(lái)很簡(jiǎn)單，api也很詳細(xì)，去官網(wǎng)看一下就可以上手了）



    
    Upload
    




    
    

    

        
選擇文件

    









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

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

        // 文件接收服務(wù)端。
        server: "uploadify.php", // 因?yàn)槭莇emo，就拿著uploadify的php來(lái)用一下

        // 選擇文件的按鈕?？蛇x。
        // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash.
        pick: "#picker",

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

        // 避免重復(fù)創(chuàng)建
        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("上傳出錯(cuò)");
    });

    uploader.on( "uploadComplete", function( file ) {
        $( "#"+file.id ).find(".progress").fadeOut();
    });
})();

項(xiàng)目過(guò)程中，我也遇到了一個(gè)很普遍的問(wèn)題（雖然上面代碼里面沒(méi)有這個(gè)參數(shù)，這個(gè)參數(shù)是指定接受哪些類型的文件），就是文件夾打開(kāi)特別慢，網(wǎng)上找了一下

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

改成這樣就可以了，親測(cè)有效~

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

可以通過(guò)upload對(duì)象改參數(shù)值，比如uploader.options.server = "服務(wù)器路徑"。也可以重寫(xiě)上傳事件。

如果不自動(dòng)上傳的話，可以通過(guò)upoloader.upload()觸發(fā)。

感覺(jué)webuploader真心用得順風(fēng)順?biāo)?，沒(méi)遇到什么問(wèn)題。實(shí)在憋不出什么來(lái)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83183.html

相關(guān)文章

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

    摘要：然鵝，因?yàn)槭且蟼鞯狡吲?，遇到了跨域的?wèn)題，嘗試過(guò)網(wǎng)上的幾種解決方法，都沒(méi)用。一開(kāi)始以為是一下子上傳太多張的緣故，就把改為，然鵝還是會(huì)報(bào)錯(cuò)。。。 其實(shí)用這個(gè)組件之前，原先是想接著用webuploader的，畢竟用過(guò)了，比較熟悉，而且也很好用。然鵝，因?yàn)槭且蟼鞯狡吲?，遇到了跨域的?wèn)題，嘗試過(guò)網(wǎng)上的幾種解決方法，都沒(méi)用。只好用七牛文檔里面的plupload，hhhhhh，官方文檔推薦的，...

    mingzhong 評(píng)論0 收藏0

  • 在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

    摘要：簡(jiǎn)介是由團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡(jiǎn)介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢(shì)，同時(shí)又不摒棄主流IE瀏覽器，沿用原來(lái)的...

    mindwind 評(píng)論0 收藏0

  • 在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

    摘要：簡(jiǎn)介是由團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡(jiǎn)介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢(shì)，同時(shí)又不摒棄主流IE瀏覽器，沿用原來(lái)的...

    endiat 評(píng)論0 收藏0

  • 在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

    摘要：簡(jiǎn)介是由團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡(jiǎn)介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢(shì)，同時(shí)又不摒棄主流IE瀏覽器，沿用原來(lái)的...

    funnyZhang 評(píng)論0 收藏0

  • WebUploader上傳插件使用說(shuō)明

    摘要：否則強(qiáng)制轉(zhuǎn)換成指定的類型。是否要分片處理大文件上傳還有其他配置項(xiàng)上傳事件選擇需要上傳的文件后，文件就會(huì)加入文件隊(duì)列，并觸發(fā)事件上傳進(jìn)度回調(diào)事件，在文件上傳中，多次調(diào)用此事件當(dāng)文件上傳成功時(shí)觸發(fā)當(dāng)文件上傳出錯(cuò)時(shí)觸發(fā)。 WebUploader簡(jiǎn)述 具有兩套運(yùn)行時(shí)支持：HTML5與FLASH 分片、并發(fā) 預(yù)覽、壓縮 多途徑添加文件 MD5驗(yàn)證 引入文件 雖然官方?jīng)]說(shuō)必須要引入JQuery...

    xbynet 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<