带有ajax上传的WordPress上的Dropzonejs，我无法使模拟文件工作

Question

我已经在 WordPress 上成功实现了 dropzonejs，并且我得到了一切工作，直到我需要将图像预加载到已经上传到服务器上的 dropzone 的部分。 我创建了自定义模板，用于在前端创建新帖子和编辑帖子。 创建帖子时一切正常，因为 Dropzone 只上传新文件，但在编辑帖子时，我需要拉入已经上传到帖子的 dropzone 文件。

从那里的所有说明中，我找不到任何适合我的解决方案。

这是一个带有dropzone的完整脚本（脚本直接进入模板php，所以在javascript里面有一点php混合）

<script>
jQuery(document).ready(function ($) {
// Dropzone file uploader
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone ("#media-uploader", {
    url: dropParam.upload,
    autoProcessQueue: true,
    parallelUploads: 1,
    uploadMultiple: false,
    maxFilesize: 3,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    maxFiles: 10,
    success: function (file, response) {
        file.previewElement.classList.add("dz-success");
        file['attachment_id'] = response; // push the id for future reference
        $('#uploaded-media').append( $('<input type="hidden" name="media-ids[]" id="media-ids[]" class="media-ids" value="' + response +'">') );
    },
    error: function (file, response) {
        file.previewElement.classList.add("dz-error");
    },
    // update the following section is for removing image from library
    removedfile: function(file) {
        var attachment_id = file.attachment_id;
        jQuery.ajax({
            type: 'POST',
            url: dropParam.delete,
            data: {
                media_id : attachment_id
            }
        });
        $('input.media-ids[type=hidden]').each(function() {
            if ($(this).val() === attachment_id) {
                $(this).remove();
            }
        });
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
    }
});
<?php if ($media != '') {
    for($i = 0; $i < count($media) ; $i++) {
        $media_info[$i]['src'] = wp_get_attachment_image_src( $media[$i] );
        $media_info[$i]['size'] = filesize( get_attached_file( $media[$i] ) );
        $media_info[$i]['name'] = basename($media_info[$i]['src'][0]); 
    ?>
        var mockFile = { name: "<?php echo $media_info[$i]['name'] ?>", size: <?php echo $media_info[$i]['size'] ?> };
        myDropzone.emit("addedfile", mockFile);
        myDropzone.emit("thumbnail", mockFile, "<?php echo $media_info[$i]['src'][0] ?>");
        myDropzone.emit("complete", mockFile);
    <?php } ?>
    var existingFileCount = <?php echo $i ?>; // The number of files already uploaded
    myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;
<?php } ?>

});
</script>

所以这实际上是从服务器获取图像，获取图像的信息并将它们放入 dropzone 字段。

问题是，当我尝试从 dropzone 中删除图像时，脚本没有响应 ajax 删除功能，我在我的 firebug 控制台中看不到响应。实际上 dropzone 停止响应进一步的操作（删除或添加新图像）

编辑： 我认为我实际上缺少的是创建mockfile 时的file['attachment_id'] = response; // push the id for future reference 部分。

Answer 1

所以我让它工作了，在寻找解决方案 2 天后，我只是在我在这里发布问题后不久才得到它。总是这样。

为了让它工作，我需要改变两件事。首先，我将attachment_id 添加到预加载的图像中

var mockFile = { name: "<?php echo $media_info[$i]['name'] ?>", size: <?php echo $media_info[$i]['size'] ?>, attachment_id: <?php echo $media[$i] ?> };

其次，预加载图像中的 attachment_id 似乎是一个字符串，因此在查找要删除的输入字段时，我必须更改它以检查相等的值而不是相同的值。

    $('input.media-ids[type=hidden]').each(function() {
        if ($(this).val() == attachment_id) {
            $(this).remove();
        }
    });