个人中心
gpt4 book ai didi

javascript - 对 HTML 中上传的文件进行哈希处理

转载 作者：行者123 更新时间：2023-12-02 21:30:20 25 4
gpt4 key购买 nike

我是 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 级别对其进行哈希处理。我不应该给服务器任何文件

最佳答案

请检查下面的代码片段。您可以通过发送带有 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>

关于javascript - 对 HTML 中上传的文件进行哈希处理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60637477/

25 4 0
文章推荐： r - 如何让 cut2 使用逗号？
文章推荐： haskell - 将功能依赖类转换为类型族实例
文章推荐： regex - 崩溃计划和正则表达式 - 根据文件名排除文件
文章推荐： Xamarin.Forms.WebView 初始加载指示器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com