「前端」关于使用webuploader实现文件秒传和断点续传

JavaScript/前端
393
0
0
2022-04-25
标签   JavaScript库

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。

断点续传

Http协议规定了如何传输某个资源的一部分,而不是全部。比如,有一个文件的大小是1000字节,浏览器可以只请求该文件的前300个字节,或者只请求第500到第1000个字节。通过这种方式,就可以不必在一次请求中传输某个资源的全部内容,而是发起多次请求,每次仅请求其中的一部分内容。等所有这些请求都返回之后,再把得到的内容一块一块的拼接起来得到完整的资源。

实现断点续传就是要利用http协议的上述特性。当用户暂停下载或上传的时候,浏览器会记录已经下载到什么位置,当用户在未来某一时间恢复下载或上传时,就可以从上次暂停的位置继续下载或上传,而不必从头开始。

秒传

对于秒传来说,其实就是文件上传前,把内容读取出来,算出md5值,然后通过ajax与服务端验证进行验证, 然后根据结果选择继续上传还是掉过上传。

实现方法

因为这是小众需求,所以webuploader官方没有给出直接的实现方式,而只是提供hook接口,让用户很简单的扩展此功能。

那么,都有哪些重要的hook接口呢?

「前端」关于使用webuploader实现文件秒传和断点续传

实现伪代码:

「前端」关于使用webuploader实现文件秒传和断点续传

「前端」关于使用webuploader实现文件秒传和断点续传

「前端」关于使用webuploader实现文件秒传和断点续传

「前端」关于使用webuploader实现文件秒传和断点续传

「前端」关于使用webuploader实现文件秒传和断点续传

「前端」关于使用webuploader实现文件秒传和断点续传

「前端」关于使用webuploader实现文件秒传和断点续传

「前端」关于使用webuploader实现文件秒传和断点续传