zoukankan      html  css  js  c++  java
  • 使用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文件就阔以了。

  • 相关阅读:
    Exception和Error有什么区别?
    网络流量劫持的含义
    安全术语:
    加载相关
    10、接到任务后的整个测试前准备流程总结
    fiddler工具栏数据解释
    HTTP的请求头标签 If-Modified-Since
    VueStudyDemo
    Vue从入门到放弃
    TypeScript初体验
  • 原文地址:https://www.cnblogs.com/shicongbuct/p/6532550.html
Copyright © 2011-2022 走看看