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