Home > Article > Web Front-end > Share js-spark-md5 usage tutorial
Share js-spark-md5 usage tutorial
- 零下一度Original
- 2017-06-26 09:16:124560browse
js-spark-md5 is something developed by Wai Guoren. There are a lot of things, but we only need one js file. I store the specific class package on my own oschina. The download address is:
js-spark -What does md5 do? js-spark-md5 is known as the fastest front-end class package in the universe. It can quickly obtain the local file md5 without uploading the file.
Maybe you think this is nothing, but when you make a file system, If you have this need, you can use this simple front-end class library to realize your "second transfer" function! Let me explain here, the md5 value of each file is unique. Many download websites will tell you the md5 value of the original file, and then let you compare it yourself after downloading. If it is consistent, it means the file is complete. of.
Okay, just because the md5 of each file is the same, then, when we upload files, we only need to obtain the md5 of the file to be uploaded on the front end, and transfer the md5 of the file to the server. Comparing the md5 of the previous file, if the same md5 exists, we only need to transfer the file name to the server to associate the previous file. There is no need to upload the same file again, which will consume storage resources, upload time, and network bandwidth. .
js-spark-md5 usage tutorial:
1. First introduce the js class package
2. Write the file form
Code:
<!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>