js-spark-md5 の使用法チュートリアルを共有する

零下一度
リリース: 2017-06-26 09:16:12
オリジナル
4630 人が閲覧しました

js-spark-md5 は Wai Guoren によって開発されたものですが、必要な js ファイルは 1 つだけです。ダウンロード アドレス:

js-spark- とは何ですか。 MD5は? js-spark-md5 は、宇宙最速のフロントエンド クラス パッケージとして知られています。ファイルをアップロードせずにローカル ファイル md5 をすぐに取得できます。

これは何もないと思われるかもしれませんが、ファイル システムを作成すると、このシンプルなフロントエンド クラス ライブラリを使用して、「2 番目の転送」機能を実現してください。ここで説明しますが、各ファイルの md5 値は固有です。多くのダウンロード Web サイトでは、元のファイルの 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>
ログイン後にコピー

ファイルとファイル参照 順序を逆にしないでください。逆にすると、正しく動作しません。

通常の動作のスクリーンショット:

私のブログ: js-spark-md5 フロントエンド JS ライブラリに基づいて、ファイルの Md5 値を迅速に取得します


以上がjs-spark-md5 の使用法チュートリアルを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!