在 Dropzone.js 上获取文件的 MD5答案

【问题标题】：Getting a File's MD5 on Dropzone.js在 Dropzone.js 上获取文件的 MD5
【发布时间】：2015-10-15 22:16:47
【问题描述】：

我想计算使用 Dropzone.js 上传的每个图像的 MD5 校验和，这样用户可以安全地删除正确的图像（我在 php 部分计算 MD5 校验和）。

我需要使用另一个库（FastMD5 或另一个库）创建 MD5 哈希，然后在单击删除按钮时将其与数据一起发送。

现在：

$Dropzone.autoDiscover = false;
    // Dropzone class:
    var myDropzone = new Dropzone("div#dropzonePreview", { 
        maxFiles:5,
        url: "up",
        acceptedFiles: ".png,.jpg,.gif,.jpeg",
        maxFilesize: 6,
        uploadMultiple: true,
        addRemoveLinks: true,

        removedfile: function(file) {
            var name = file.name;  
            var idform = document.getElementById('idform').value; //for me 
            var hash= md5(file); // not tested
            $.ajax({
                type: 'POST',
                url: 'del.php',
                data:"filename="+name+"&idform="+idform+"&hash="+hash,
                dataType: 'html'
            });
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;        
      }

    });

问题是md5(file)不起作用，我猜不是数据文件，我试图寻找数据来计算hash但是什么也没找到。

【问题讨论】：

标签： javascript hash dropzone.js

【解决方案1】：

我确信有更好的方法可以做到这一点，但我已经做到了，它会将正确的哈希发送到我的删除页面 (del.php)，我刚刚意识到我还需要哈希避免两次上传同一个文件..

我用过SPARK-MD5。

    Dropzone.autoDiscover = false;
        // Dropzone class:
        var myDropzone = new Dropzone("div#dropzonePreview", { 
            maxFiles:5,
            url: "upload.php",
            acceptedFiles: ".png,.jpg,.gif,.jpeg",
            maxFilesize: 6,
            uploadMultiple: true,
            addRemoveLinks: true,

        //to remove one file
            removedfile: function(file) {
                var name = file.name;  
                var idform = document.getElementById('idform').value; //for me
                // START SPARKMD5
                var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
                    chunkSize = 2097152,                             // Read in chunks of 2MB
                    chunks = Math.ceil(file.size / chunkSize),
                    currentChunk = 0,
                    spark = new SparkMD5.ArrayBuffer(),
                    fileReader = new FileReader();

                fileReader.onload = function (e) {
                    console.log('read chunk nr', currentChunk + 1, 'of', chunks);
                    spark.append(e.target.result);                   // Append array buffer
                    currentChunk++;

                    if (currentChunk < chunks) {
                        loadNext();
                    } else {
                        console.log('finished loading');
                       // START DROPZONE PART
                        $.ajax({
                            type: 'POST',
                            url: 'del.php',
                            data:"filename="+name+"&idform="+idform+"&hash="+spark.end(), //spark.end is the MD5
                            dataType: 'html'
                        });
                        var _ref;
                        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
                        // END DROPZONE PART
                    }
                };

                fileReader.onerror = function () {
                    console.warn('oops, something went wrong.');
                };

                function loadNext() {
                    var start = currentChunk * chunkSize,
                        end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

                    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
                }

                loadNext();
                // END SPARKMD5
          }
});

我不确定 fileReader.onerror 的必要性，然后加载下一步。无论如何，当需要在单击“删除”按钮时发送哈希时它正在工作，但我仍在寻找一种更好的方法来在上传之前比较 md5。

【讨论】：