javascript - Dropzone js 使用 md5_file 检查重复文件

Question

以下是我使用 dropzone.js 插件在服务器上上传文件的代码:

var file_up_names = new Array;
var duplicate_files = new Array;
var token = $('input[name=_token]').val();
Dropzone.autoDiscover = false;
var dropzone = $("#addPhotosForm").dropzone({
    addRemoveLinks: true,
    dictRemoveFileConfirmation: "Do you want to remove this image?",
    dictDefaultMessage: "Drop images here to upload",
    dictRemoveFile: "Remove photo",
    init: function() {
      this.on("success", function(file, response) {
        if (response.status === 1) {
            file_up_names.push(response.filename);
            $(file.previewTemplate).append('<span class="server_file_path hide">' + response.newfilename + '</span>');
        } else if (response.status === 2) {
            duplicate_files.push(response.filename);
            this.removeFile(file);
        }
    }),
      this.on("queuecomplete", function() {
        var html = "Photos added successfully!";
        $('#photoUploadSuccess').html('');
        $('#photoUploadError').html('');
        $('#photoUploadSuccess').removeClass('hide');
        $('#photoUploadError').addClass('hide');
        if (file_up_names.length > 0) {
            if (duplicate_files.length > 0) {
                html += " Following photos are skipped as those are already uploaded.";
                html += "<ul>";
                for (var i = 0; i < duplicate_files.length; ++i) {
                    html += "<li>";
                    html += duplicate_files[i];
                    html += "</li>";
                }
                html += "</ul>";
            }
            $('#photoUploadSuccess').html(html);
        } else if (duplicate_files.length > 0 && file_up_names.length === 0) {
            html = "Following photos already exists. Please check to see if it already exists and try again.";
            html += "<ul>";
            for (var i = 0; i < duplicate_files.length; ++i) {
                html += "<li>";
                html += duplicate_files[i];
                html += "</li>";
            }
            html += "</ul>";
            $('#photoUploadSuccess').addClass('hide');
            $('#photoUploadError').removeClass('hide');
            $('#photoUploadError').html(html);
        } else {
            html = "Photos not uploaded!";
            $('#photoUploadSuccess').addClass('hide');
            $('#photoUploadError').removeClass('hide');
            $('#photoUploadError').html(html);
        }
        duplicate_files = [];
        file_up_names = [];
        setTimeout(function() {
            $('#photoUploadSuccess').html('');
            $('#photoUploadError').html('');
            $('#photoUploadSuccess').addClass('hide');
            $('#photoUploadError').addClass('hide');
        }, 5000);
    }),
    this.on("removedfile", function(file) {
        var server_file = $(file.previewTemplate).children('.server_file_path').text();
        // Do a post request and pass this path and use server-side language to delete the file
        var token = $('input[name=_token]').val();
        $.ajax({
            type: 'POST',
            headers: {'X-CSRF-TOKEN': token},
            url: "{{ URL::route('removePhotos') }}",
            data: "file_name=" + server_file,
            dataType: 'html'
        });
    })
}
});

下面是我的服务器代码，它获取文件的 md5 并将其存储在服务器上，下次当用户再次上传相同的图像时，它会检查数据库，如果发现相同的 md5_file 结果，则不允许上传图像。当我使用简单表单时它可以工作，但在 dropzone 上它不起作用:

$tempFile = $_FILES['file']['tmp_name'];
$md5_check = md5_file($tempFile);
//check if same image uploaded before
$duplicateCheck = Photos::where('userId', '=', $this->userId)->where('md5_check', '=', "$md5_check")->where('isDeleted', '=', 0)->count();

我发现，如果我一起上传相同的图像，它将无法正常工作，并且会从数据库返回计数 0。但是，如果我单独上传相同的图像，例如上传图像后，再次上传相同的图像，它会从数据库中获取计数并给出该图像已存在的消息。也许是由于 dropzone 异步调用造成的，但不知道如何处理这个问题。

Answer 1

这是因为当您上传多个图像时 $_FILES 包含一组文件，因此您应该使用 foreach 循环它并在该循环内执行操作。

您可以通过插入以下代码来检查上传超过 1 个文件时发生的情况:

var_dump($_FILES);

或者，如果您希望结果更具可读性:

echo "<pre>".print_r($_FILES, true)."</pre>";

检查$_FILES的结构，当您上传超过1个文件时，它应该是一个文件数组。