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类库,快速获取文件md5值
以上就是分享js-spark-md5使用教程的详细内容。