HTML5 file api讀取文件的MD5碼工具


 

 

1、工具的用途:用HTML5 file api讀取文件的MD5碼。MD5碼在文件的唯一性識別上有很重要的應用,業內常用MD5進行文件識別、文件秒傳、文件安全性檢查等;

2、適用性:IE、Chrome皆兼容;

3、缺陷:當上傳大文件時,需要較長的時間才能掃描出MD5碼;

4、關於引用:其中引用了js文件(spark-md5.js

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>HTML5 read files hash</title>
    <meta name="author" content="Mofei">
    <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    <script src="spark-md5.js" type="text/javascript"></script>
</head>

<body>
    <div>
        <header>
            <h1>HTML5 read files hash</h1>
        </header>
        <div>
            <input type="file" id="file">
            <div id="box"></div>
        </div>
        <footer>
            <p>&copy; Copyright  by Percy(<a href="http://www.cnblogs.com/Percy_Lee/">www.cnblogs.com/Percy_Lee</a>)</p>
        </footer>
    </div>

    <script type="text/javascript">
     document.getElementById("file").addEventListener("change", function () {
        var fileReader = new FileReader(),
            box = document.getElementById('box'),
            blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
            file = document.getElementById("file").files[0],
            chunkSize = 2097152,
            chunks = Math.ceil(file.size / chunkSize),
            currentChunk = 0,
            bs = fileReader.readAsBinaryString,
            spark = bs ? new SparkMD5() : new SparkMD5.ArrayBuffer();

        fileReader.onload = function (ee) {
            spark.append(ee.target.result);
            currentChunk++;

            if (currentChunk < chunks) {
                loadNext();
            } else {
                box.innerText = 'MD5:  ' + spark.end();
            }
        }

        function loadNext() {
            var start = currentChunk * chunkSize, end = start + chunkSize >= file.size ? file.size : start + chunkSize;
            if (bs) fileReader.readAsBinaryString(blobSlice.call(file, start, end));
            else fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
        }

        loadNext();
    });

    </script>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM