使用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文件就闊以了。