首页 / JAVASCRIPT / 分享js-spark-md5使用教程

分享js-spark-md5使用教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了分享js-spark-md5使用教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2449字，纯文字阅读大概需要4分钟。

内容图文

js-spark-md5是歪果仁开发的东西，有点多，但是我们只要一个js文件即可，具体类包我存在自己的oschina上，下载地址：

js-spark-md5是做什么的？ js-spark-md5是号称全宇宙最快的前端类包，可以无需上传文件就快速获取本地文件md5.

可能你觉得这没什么，但是，当你做一个文件系统时候，就有这需求，用这个简单的前端类库就能实现你“秒传”的功能！这里我解释下，每个文件的md5值都是唯一的，这也是很多下载网站，会告诉你原文件的md5是多少，然后下载完毕让你自行去对比下，如果一致，就说明文件是完整的。

好了，正因为每个文件的md5是一样的，那么，我们在做文件上传的时候，就只要在前端先获取要上传的文件md5，并把文件md5传到服务器，对比之前文件的md5，如果存在相同的md5，我们只要把文件的名字传到服务器关联之前的文件即可，并不需要再次去上传相同的文件，再去耗费存储资源、上传的时间、网络带宽。

js-spark-md5使用教程：

1.先引入js类包

2.写文件表单

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form method="POST" enctype="multipart/form-data" onsubmit="return false;" >
    <input id=file type=file placeholder="select a file" />
</form>
<pre id=log></pre>
<script src="//cdn.rawgit.com/satazor/SparkMD5/master/spark-md5.min.js?1.1.11"></script>
<script>
    var log=document.getElementById("log");
    document.getElementById("file").addEventListener("change", function() {
        var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
                file = this.files[0],
                chunkSize = 2097152, // read in chunks of 2MB
                chunks = Math.ceil(file.size / chunkSize),
                currentChunk = 0,
                spark = new SparkMD5.ArrayBuffer(),
                frOnload = function(e){
                  //  log.innerHTML+="\nread chunk number "+parseInt(currentChunk+1)+" of "+chunks;
                    spark.append(e.target.result); // append array buffer
                    currentChunk++;
                    if (currentChunk < chunks)
                        loadNext();
                    else
                        log.innerHTML+="\n加载结束 :\n\n计算后的文件md5:\n"+spark.end()+"\n\n现在你可以选择另外一个文件!\n";
                },
                frOnerror = function () {
                    log.innerHTML+="\糟糕，好像哪里错了.";
                };
        function loadNext() {
            var fileReader = new FileReader();
            fileReader.onload = frOnload;
            fileReader.onerror = frOnerror;
            var start = currentChunk * chunkSize,
                    end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
            fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
        };

        loadNext();
    });
</script>

</body>
</html>

注意，spark.end()就是文件的md5值，文件引用顺序一定不能倒了，要不无法正常工作。

正常工作的截图：

分享js-spark-md5使用教程 - 文章图片

本人博客：基于js-spark-md5前端js类库，快速获取文件Md5值

以上就是分享js-spark-md5使用教程的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的分享js-spark-md5使用教程全部内容，希望文章能够帮你解决分享js-spark-md5使用教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/301163.html

来源：【匿名】