在 HTML 中散列上传的文件 [关闭]答案

【问题标题】：Hashing an uploaded file in HTML [closed]在 HTML 中散列上传的文件 [关闭]
【发布时间】：2020-03-12 16:46:23
【问题描述】：

我是 HTML 和 JavaScript 的初学者。我想使用 HTML5 上传图像并通过 JavaScript 获取其哈希值。之后，我想将哈希值发送到 PHO 服务器。我用网络浏览器上传了一张图片。但我不知道如何散列图像。我看了很多指南，但没有人帮助我。我的 HTML 代码如下。请填写并帮助我。

HTML：

<!DOCTYPE html>
<html>
<body>
<input type="file" id="customerFile" name="Documents"/>
<script>
     // Get hash value
     // Send it to the server
</script>
</body>
</html>

我应该在 html 级别对其进行哈希处理。我不应该给服务器任何文件

【问题讨论】：

你要计算图片的hash吗？
是的，没错。
类似的问题已在此处回答 [1] stackoverflow.com/questions/15208640/…
这能解决你的问题吗？
我看到了。它误导了我作为初学者。

标签： javascript html

【解决方案1】：

请检查下面的sn-p。您可以通过发送带有result 的POST 请求将哈希值发送到服务器。

function calculateMD5Hash(file, bufferSize) {
        let def = Q.defer();

        let fileReader = new FileReader();
        let fileSlicer = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
        let hashAlgorithm = new SparkMD5();
        let totalParts = Math.ceil(file.size / bufferSize);
        let currentPart = 0;
        let startTime = new Date().getTime();

        fileReader.onload = function (e) {
            currentPart += 1;

            def.notify({
                currentPart: currentPart,
                totalParts: totalParts
            });

            let buffer = e.target.result;
            hashAlgorithm.appendBinary(buffer);

            if (currentPart < totalParts) {
                processNextPart();
                return;
            }

            def.resolve({
                hashResult: hashAlgorithm.end(),
                duration: new Date().getTime() - startTime
            });
        };

        fileReader.onerror = function (e) {
            def.reject(e);
        };

        function processNextPart() {
            let start = currentPart * bufferSize;
            let end = Math.min(start + bufferSize, file.size);
            fileReader.readAsBinaryString(fileSlicer.call(file, start, end));
        }

        processNextPart();
        return def.promise;
    }

    function calculate() {

        let input = document.getElementById('file');
        if (!input.files.length) {
            return;
        }

        let file = input.files[0];
        let bufferSize = Math.pow(1024, 2) * 10; // 10MB

        calculateMD5Hash(file, bufferSize).then(
            function (result) {
                // Success
                console.log(result);
                // SEND result TO THE SERVER
            },
            function (err) {
                // There was an error,
            });
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.4.1/q.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/2.0.2/spark-md5.min.js"></script>

<div>
    <input type="file" id="file"/>
    <input type="button" onclick="calculate();" value="Calculate Hash" class="btn primary"/>
</div>
</body>
</html>

【讨论】：

@Pramodya Mendis：我应该在 html 级别对其进行哈希处理。我不应该给服务器任何文件。
所以您想对使用 HTML 表单上传的图像进行哈希处理？
没错，这是我的目的。并且没有文件必须发送到服务器。
想要使用 PHP 向服务器发送哈希值？
没有使用 php。我散列图像并将包含散列值的表单发送到服务器。