{"id":92,"date":"2015-12-11T19:57:11","date_gmt":"2015-12-11T11:57:11","guid":{"rendered":"https:\/\/www.tiferking.cn\/?p=92"},"modified":"2015-12-11T19:57:11","modified_gmt":"2015-12-11T11:57:11","slug":"html%e5%89%8d%e5%8f%b0%e4%bd%bf%e7%94%a8js%e7%94%9f%e6%88%90%e6%96%87%e4%bb%b6%e5%93%88%e5%b8%8chash","status":"publish","type":"post","link":"https:\/\/www.tiferking.cn\/index.php\/2015\/12\/11\/92\/","title":{"rendered":"html\u524d\u53f0\u4f7f\u7528js\u751f\u6210\u6587\u4ef6\u54c8\u5e0c(hash)"},"content":{"rendered":"<p><!--wp_fromhtmlpreview_devfmt--><\/p>\n<p><!--wp_fromhtmlpreview_devfmt--><\/p>\n<p>\u8fd9\u6b21\u8981\u8ba4\u8ba4\u771f\u771f\u7684\u5199\u4e00\u7bc7\u6587\u7ae0\u4e86\uff0c\u54b3\u54b3\u3002 \u5173\u4e8e\u5982\u4f55\u524d\u53f0\u751f\u6210\u6587\u4ef6hash\u7684\u6587\u7ae0\u3002<\/p>\n<p>\u4e4b\u524d\u5728\u7f51\u4e0a\u627e\u4e86\u5f88\u591a\u6587\u7ae0\u90fd\u6ca1\u6709\u7279\u522b\u8be6\u7ec6\u7684\u5185\u5bb9\uff0c\u6700\u540e\u6839\u636e\u4e00\u4e9b\u4fe1\u606f\u8fd8\u6709\u81ea\u5df1\u7684\u6478\u7d22\uff0c\u505a\u4e86\u51fa\u6765\uff0c\u6240\u4ee5\u501f\u4ee5\u5206\u4eab\u7ed9\u5927\u5bb6\u3002<\/p>\n<p>\u9996\u5148\u6211\u5148\u6765\u7b80\u5355\u8bf4\u8bf4hash\uff0c\u5b83\u7684\u610f\u601d\u662f\u901a\u8fc7\u4e00\u4e2a\u7b97\u6cd5\uff0c\u5c06\u4e00\u4e32\u6570\u636e\u901a\u8fc7\u8fd0\u7b97\u53d8\u6362\u6210\u4e00\u4e2a\u56fa\u5b9a\u957f\u5ea6\u7684\u6458\u8981(\u6216\u8005\u8bf4\u6307\u7eb9)\uff0c\u7136\u540e\u6211\u4eec\u53ef\u4ee5\u5728\u6570\u636e\u4ea4\u6362\u7684\u65f6\u5019\u7528\u5b83\u6765\u5bf9\u6570\u636e\u7684\u5185\u5bb9\u8fdb\u884c\u6821\u9a8c\u7b49\u7b49\u3002<\/p>\n<p>\u4e3e\u4e2a\u6817\u5b50\uff1a\u6700\u8fd1\u6211\u5c31\u8fd9\u4e48\u7528\u4e86\u7528\u5b83\uff0c\u5f53\u5ba2\u6237\u7aef\u5411\u670d\u52a1\u5668\u4f20\u8f93\u6570\u636e\u7684\u65f6\u5019\uff0c\u9700\u8981\u5148\u5411\u670d\u52a1\u5668\u63d0\u4f9b\u6587\u4ef6\u7684hash\uff0c\u7136\u540e\u5982\u679c\u670d\u52a1\u5668\u5305\u542b\u4e86\u540c\u6837hash\u7684\u6587\u4ef6\uff0c\u90a3\u4e48\u8fd4\u56de\u4fe1\u606f\u4e0d\u9700\u8981\u5ba2\u6237\u7aef\u4e0a\u4f20\uff0c\u53ea\u7528\u7ed9\u7528\u6237\u5efa\u7acb\u4e00\u4e2a\u94fe\u63a5\u5c31\u597d\uff0c\u5982\u679c\u6ca1\u6709\uff0c\u90a3\u4e48\u5c31\u8981\u6c42\u5ba2\u6237\u7aef\u4e0a\u4f20\u6587\u4ef6\u3002<\/p>\n<p>\u4e8e\u662f\u5c31\u7275\u626f\u5230\u4e86\u8fd9\u4e2a\u95ee\u9898\uff0c\u5c31\u662f\u5728html\u524d\u53f0\u751f\u6210\u6587\u4ef6\u7684hash\uff0c\u7136\u540e\u53d1\u7ed9\u670d\u52a1\u5668\uff0c\u7b49\u5f85\u670d\u52a1\u5668\u56de\u590d\u3002<\/p>\n<p>\u7814\u7a76\u4e86\u5f88\u4e45\u7ec8\u4e8e\u5b9e\u73b0\u4e86\u3002\u662f\u501f\u7528\u4e86\u4e00\u4e2a\u540d\u53ebcrypto-js\u7684\u52a0\u5bc6\u5e93\u5b9e\u73b0\u7684\u3002\u8fd9\u662f\u5b83\u5728googlecode\u4e0a\u7684\u9879\u76ee\u5730\u5740\uff1a<a href=\"https:\/\/code.google.com\/p\/crypto-js\/\" target=\"_blank\">https:\/\/code.google.com\/p\/crypto-js\/<\/a><\/p>\n<p>\u95f2\u8bdd\u5c11\u8bf4\uff0c\u5177\u4f53\u5b9e\u73b0\u662f\u8fd9\u4e48\u505a\u7684\uff1a<\/p>\n<p style=\"padding-left: 30px;\"><strong>\u9996\u5148\u8981\u5148\u5728\u7f51\u9875\u4e0a\u6709\u4e00\u4e2a\u6587\u4ef6\u9009\u53d6\u7684\u6846\uff1a<\/strong><\/p>\n<p style=\"padding-left: 30px;\"><em><strong>&lt;input type=&#8221;file&#8221; \/&gt;<\/strong><\/em><\/p>\n<p style=\"padding-left: 30px;\"><b>\u5b83\u7684\u6548\u679c\u662f\u8fd9\u6837\u7684\uff1a<\/b><\/p>\n<p style=\"padding-left: 30px;\"><input type=\"file\" \/><\/p>\n<p style=\"padding-left: 30px;\"><strong>\u5f53\u7136\u5b83\u5177\u4f53\u957f\u4ec0\u4e48\u6837\u8981\u770b\u7528\u6237\u4f7f\u7528\u7684\u6d4f\u89c8\u5668\u4e86\u3002\u4e0d\u8fc7\u6ca1\u5173\u7cfb\u540e\u8fb9\u6211\u5c31\u8981\u8bf4\u600e\u4e48\u6837\u7f8e\u5316\u8fd9\u4e2a\u6846\u6846\u3002<\/strong><\/p>\n<p style=\"padding-left: 30px;\"><strong>\u53ef\u4ee5\u770b\u5230\u5df2\u7ecf\u53ef\u4ee5\u901a\u8fc7\u8fd9\u4e2a\u6846\u6846\u6765\u9009\u53d6\u6587\u4ef6\u4e86\u3002\u7136\u540e\u6211\u4eec\u5c31\u8981\u5728js\u4e0a\u8fb9\u4e0b\u529f\u592b\u4e86\u3002<\/strong><\/p>\n<p style=\"padding-left: 30px;\"><strong>\u9996\u5148\u6211\u4eec\u7ed9\u8fd9\u4e2a\u8f93\u5165\u7684\u6846\u4e00\u4e2a\u53ef\u4ee5\u88abjs\u8c03\u7528\u7684id\u3002<\/strong><\/p>\n<p style=\"padding-left: 30px;\"><em><strong>&lt;input id=&#8221;UploadFile&#8221; type=&#8221;file&#8221; \/&gt;<\/strong><\/em><\/p>\n<p style=\"padding-left: 30px;\"><strong>\u7136\u540e\u6211\u4eec\u5f00\u59cb\u5199js\uff1a<\/strong><\/p>\n<p style=\"padding-left: 30px;\"><strong><em>function FileHashCreat(){<\/em><\/strong><br \/>\n<strong><em> var fileReader = new FileReader(); \/\/\u5efa\u7acb\u4e00\u4e2aFileReader\u5bf9\u8c61<\/em><\/strong><br \/>\n<strong><em> var BlobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice; \/\/\u7528\u4e8e\u652f\u6301\u591a\u79cd\u6d4f\u89c8\u5668\u7684\u6587\u4ef6\u8bfb\u53d6<\/em><\/strong><br \/>\n<strong><em> file = document.getElementById(&#8220;UploadFile&#8221;).files[0]; \/\/\u901a\u8fc7id\u83b7\u53d6html\u4e2dinput\u6807\u7b7e\u7684\u6587\u4ef6<\/em><\/strong><br \/>\n<strong><em> var BlockSize = 10485760; \/\/\u8981\u628a\u6587\u4ef6\u5206\u6210\u4e00\u5757\u4e00\u5757\u7684\uff0c\u8fd9\u6837\u53ef\u4ee5\u5e94\u5bf9\u5de8\u5927\u7684\u6587\u4ef6\u800c\u4e0d\u81f3\u4e8e\u51fa\u9519\uff0c\u8fd9\u91cc\u5c06\u6587\u4ef6\u4ee510M\u4e3a\u5355\u4f4d\u8fdb\u884c\u5206\u5272\u3002<\/em><\/strong><br \/>\n<strong><em> var Blocks = Math.ceil(file.size \/ BlockSize); \/\/\u9996\u5148\u8ba1\u7b97\u9700\u8981\u5206\u5272\u7684\u5757\u6570<\/em><\/strong><br \/>\n<strong><em> var CurrentBlock = 0; \/\/\u8bb0\u5f55\u5f53\u524d\u5df2\u7ecf\u8fd0\u884c\u7684\u5757\u6570<\/em><\/strong><br \/>\n<strong><em> var FileSHA256 = CryptoJS.algo.SHA256.create(); \/\/\u65b0\u5efa\u4e00\u4e2a\u5bf9\u8c61<\/em><\/strong><br \/>\n<strong><em> var start = 0;<\/em><\/strong><br \/>\n<strong><em> var end = start + BlockSize &gt;= file.size ? file.size : start + BlockSize;<\/em><\/strong><br \/>\n<strong><em> \/\/\u8fd9\u4e00\u53e5\u53ef\u4ee5\u7b49\u4ef7\u4e3a\uff1a<\/em><\/strong><br \/>\n<strong><em> \/****************<\/em><\/strong><br \/>\n<strong><em> var end = 0;<\/em><\/strong><br \/>\n<strong><em> if (start + BlockSize &gt;= file.size){<\/em><\/strong><br \/>\n<strong><em> end = file.size;<\/em><\/strong><br \/>\n<strong><em> }else{<\/em><\/strong><br \/>\n<strong><em> end = start + BlockSize;<\/em><\/strong><br \/>\n<strong><em> }<\/em><\/strong><br \/>\n<strong><em> ****************\/<\/em><\/strong><br \/>\n<strong><em> \/\/\u9632\u6b62\u8bfb\u53d6\u6587\u4ef6\u7684\u957f\u5ea6\u53d1\u751f\u9519\u8bef<\/em><\/strong><br \/>\n<strong><em> fileReader.readAsArrayBuffer(BlobSlice.call(file, start, end));<\/em><\/strong><br \/>\n<strong><em> fileReader.onload = function(filestring) { \/\/\u6587\u4ef6\u8bfb\u53d6\u8fc7\u7a0b<\/em><\/strong><br \/>\n<strong><em> FileSHA256.update(arrayBufferToWordArray(filestring.target.result)); \/\/\u6839\u636e\u5176\u9879\u76ee\u4e2d\u7684\u63cf\u8ff0\uff0c\u53ef\u4ee5\u901a\u8fc7\u8fd9\u79cd\u65b9\u6cd5\u5c06\u6570\u636e\u5206\u6bb5\u540e\u52a0\u8f7d\uff0c\u4f46\u662f\u56e0\u4e3acrypto-js\u8fd9\u4e2a\u5e93\u4e0d\u80fd\u76f4\u63a5\u63a5\u53d7arraybuffer\uff0c\u6240\u4ee5\u8981\u8fdb\u884c\u8f6c\u6362\u3002<\/em><\/strong><br \/>\n<strong><em> CurrentBlock++; \/\/\u6587\u4ef6\u533a\u5757\u540e\u79fb<\/em><\/strong><br \/>\n<strong><em> if (CurrentBlock &lt; Blocks) { \/\/\u5224\u65ad\u662f\u5426\u5230\u8fbe\u6587\u4ef6\u672b\u5c3e<\/em><\/strong><br \/>\n<strong><em> start = CurrentBlock * Blocksize; \/\/\u66f4\u65b0\u6587\u4ef6\u533a\u5757\u5f00\u59cb\u7ed3\u675f\u7684\u4f4d\u7f6e<\/em><\/strong><br \/>\n<strong><em> end = start + BlockSize &gt;= file.size ? file.size : start + BlockSize;<\/em><\/strong><br \/>\n<strong><em> fileReader.readAsArrayBuffer(BlobSlice.call(file, start, end)); \/\/\u52a0\u8f7d\u4e0b\u4e00\u4e2a\u533a\u6bb5<\/em><\/strong><br \/>\n<strong><em> } else {<\/em><\/strong><br \/>\n<strong><em> var FileHash = FileSHA256.finalize(); \/\/\u83b7\u53d6\u6700\u7ec8\u7684\u6587\u4ef6hash\uff0c\u6ce8\u610f\u8fd9\u4e2afinalize\u53ea\u80fd\u8c03\u7528\u4e00\u6b21\uff0c\u591a\u6b21\u8c03\u7528\u4f1a\u51fa\u9519\u3002<\/em><\/strong><\/p>\n<p><strong><em> }<\/em><\/strong><br \/>\n<strong><em> }<\/em><\/strong><br \/>\n<strong><em>}<\/em><\/strong><br \/>\n<strong><em> \/\/arraybuffer to wordarray \u7684\u8f6c\u6362\u51fd\u6570<\/em><\/strong><br \/>\n<strong><em> function swapendian32(val) {<\/em><\/strong><br \/>\n<strong><em> return (((val &amp; 0xFF) &lt;&lt; 24)<\/em><\/strong><br \/>\n<strong><em> | ((val &amp; 0xFF00) &lt;&lt; 8)<\/em><\/strong><br \/>\n<strong><em> | ((val &gt;&gt; 8) &amp; 0xFF00)<\/em><\/strong><br \/>\n<strong><em> | ((val &gt;&gt; 24) &amp; 0xFF)) &gt;&gt;&gt; 0;<\/em><\/strong><\/p>\n<p style=\"padding-left: 30px;\"><strong><em>}<\/em><\/strong><br \/>\n<strong><em> function arrayBufferToWordArray(arrayBuffer) {<\/em><\/strong><br \/>\n<strong><em> var fullWords = Math.floor(arrayBuffer.byteLength \/ 4);<\/em><\/strong><br \/>\n<strong><em> var bytesLeft = arrayBuffer.byteLength % 4;<\/em><\/strong><\/p>\n<p style=\"padding-left: 30px;\"><strong><em>var u32 = new Uint32Array(arrayBuffer, 0, fullWords);<\/em><\/strong><br \/>\n<strong><em> var u8 = new Uint8Array(arrayBuffer);<\/em><\/strong><\/p>\n<p style=\"padding-left: 30px;\"><strong><em>var cp = [];<\/em><\/strong><br \/>\n<strong><em> for (var i = 0; i &lt; fullWords; ++i) {<\/em><\/strong><br \/>\n<strong><em> cp.push(swapendian32(u32[i]));<\/em><\/strong><br \/>\n<strong><em> }<\/em><\/strong><\/p>\n<p style=\"padding-left: 30px;\"><strong><em>if (bytesLeft) {<\/em><\/strong><br \/>\n<strong><em> var pad = 0;<\/em><\/strong><br \/>\n<strong><em> for (var i = bytesLeft; i &gt; 0; &#8211;i) {<\/em><\/strong><br \/>\n<strong><em> pad = pad &lt;&lt; 8;<\/em><\/strong><br \/>\n<strong><em> pad += u8[u8.byteLength &#8211; i];<\/em><\/strong><br \/>\n<strong><em> }<\/em><\/strong><\/p>\n<p style=\"padding-left: 30px;\"><strong><em>for (var i = 0; i &lt; 4 &#8211; bytesLeft; ++i) {<\/em><\/strong><br \/>\n<strong><em> pad = pad &lt;&lt; 8;<\/em><\/strong><br \/>\n<strong><em> }<\/em><\/strong><\/p>\n<p style=\"padding-left: 30px;\"><strong><em>cp.push(pad);<\/em><\/strong><br \/>\n<strong><em> }<\/em><\/strong><\/p>\n<p style=\"padding-left: 30px;\"><strong><em>return CryptoJS.lib.WordArray.create(cp, arrayBuffer.byteLength);<\/em><\/strong><br \/>\n<strong><em> };<\/em><\/strong><\/p>\n<p style=\"padding-left: 30px;\">\u00a0<strong>\u81f3\u6b64\u5c31\u5b9e\u73b0\u4e86\u6240\u8ff0\u529f\u80fd\u3002<\/strong><\/p>\n<p style=\"padding-left: 30px;\">\u8fd9\u662f\u4e00\u4e2ademo\uff0c\u53ef\u4ee5\u8bd5\u8bd5\uff1a<\/p>\n<p style=\"padding-left: 30px;\"><a href=\"https:\/\/www.tiferking.cn\/wp-content\/uploads\/2015\/12\/demo.html\" target=\"_blank\">\u524d\u53f0\u751f\u6210\u6587\u4ef6hash<\/a><br \/>\n===============\u6211\u662f\u5206\u754c\u7ebf=================<\/p>\n<p style=\"padding-left: 30px;\">\u5982\u679c\u60f3\u8981\u7f8e\u5316\u90a3\u4e2a\u4e11\u4e11\u7684\u6587\u4ef6\u9009\u62e9\u6846\u7684\u8bdd\uff0c\u53ef\u4ee5\u76f4\u63a5\u7ed9\u4ed6\u52a0\u4e2astyle=&#8221;display:none;&#8221;,\u7136\u540e\u518d\u5728\u81ea\u5df1\u753b\u7684\u6309\u952e\u6216\u8005\u6807\u7b7e\u7684\u90a3\u91cc\u52a0\u4e0a\uff1a<\/p>\n<p style=\"padding-left: 30px;\"><strong><em>document.getElementById(&#8220;UploadFile&#8221;).click();<\/em><\/strong><\/p>\n<p style=\"padding-left: 30px;\">\u5c31\u53ef\u4ee5\u4e86\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8fd9\u6b21\u8981\u8ba4\u8ba4\u771f\u771f\u7684\u5199\u4e00\u7bc7\u6587\u7ae0\u4e86\uff0c\u54b3\u54b3\u3002 \u5173\u4e8e\u5982\u4f55\u524d\u53f0\u751f\u6210\u6587\u4ef6hash\u7684\u6587\u7ae0\u3002 \u4e4b\u524d\u5728\u7f51\u4e0a\u627e\u4e86\u5f88\u591a\u6587\u7ae0\u90fd\u6ca1\u6709\u7279\u522b\u8be6 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-92","post","type-post","status-publish","format-standard","hentry","category-html-study"],"_links":{"self":[{"href":"https:\/\/www.tiferking.cn\/index.php\/wp-json\/wp\/v2\/posts\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tiferking.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tiferking.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tiferking.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tiferking.cn\/index.php\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":0,"href":"https:\/\/www.tiferking.cn\/index.php\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tiferking.cn\/index.php\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tiferking.cn\/index.php\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tiferking.cn\/index.php\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}