js-spark-md5 사용 튜토리얼 공유
javascript
프런트 엔드
기반으로
빠른
클래스 라이브러리
js-spark-md5는 Wai Guoren이 개발한 것입니다. 하지만 우리에게는 하나의 js 파일만 필요합니다. 다운로드 주소는
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>