使用webuploader實現文件的斷點續傳

    webuploader是百度Fex團隊開發的一款上傳插件，對於現代瀏覽器採用了HTML5的方式進行上傳，二爲了兼容IE瀏覽器則採用了Flash的方式做爲補充。

　　首先，這個插件在全局僅暴露一個WebUploader對象，以下代碼所示,生成了一個uploader實例。

　　

var uploader = WebUploader.create({

    // swf文件路徑
    swf: BASE_URL + '/js/Uploader.swf',

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

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

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

　　HTML的代碼是這樣的：

<div id="uploader" class="wu-example">
    <!--用來存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">選擇文件</div>
        <button id="ctlBtn" class="btn btn-default">開始上傳</button>
    </div>
</div>

　　這個插件能夠實現文件的斷點續傳，能夠相似這樣來設置分片。

 

文件進行了分片以後，每一片都會發起一個POST請求，當文件暫停傳輸的時候，最後一片也會傳輸到服務器，再次傳輸的時候會從下一片開始進行傳輸。

因爲有以上的機制，當調用uploader的實例的stop方法的時候，進度條會繼續前進一段再中止，能夠在源碼中的updateFileProgress中添加如下代碼使進度條馬上中止，上代碼。

當file對象的狀態爲暫停的時候則不繼續派發uploadProgress事件。

 

另外，在使用flash方式的調試的時候需開啓本地服務器，而且會遇到跨域的問題，如圖：

這時候後臺配置下crossdomain.xml文件就闊以了。