Share js-spark-md5 usage tutorial-JS Tutorial-php.cn

Share js-spark-md5 usage tutorial

零下一度

Release： 2017-06-26 09:16:12

Original

4631 people have browsed it

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>
Copy after login

Note that spark.end() is the md5 value of the file. The file reference order must not be reversed, otherwise it will not work properly.

Normal working screenshots:

My blog: Based on the js-spark-md5 front-end js library, quickly obtain the file Md5 value

The above is the detailed content of Share js-spark-md5 usage tutorial. For more information, please follow other related articles on the PHP Chinese website!