在Dropzone.js上获取文件的MD5

时间:2015-10-15 22:16:47

标签: javascript hash dropzone.js

我想计算用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(文件)不能正常工作,我猜它不是数据文件,我试图查找数据来计算哈希但却一无所获。

1 个答案:

答案 0 :(得分:1)

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

我使用过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。