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 remove函数我在firebug控制台中看不到响应。实际上，dropzone在进一步操作（删除或添加新图像）时停止响应

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

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();
        }
    });

使用ajax上传的WordPress上的Dropzonejs，我无法使mockfile正常工作

1 个答案: