分享js-spark-md5使用教程

零下一度
Lepaskan: 2017-06-26 09:16:12
asal
4648 orang telah melayarinya

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>
<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>
Salin selepas log masuk

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

正常工作的截图:

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


Atas ialah kandungan terperinci 分享js-spark-md5使用教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan