Dropzone：如何获取在某个缩略图上单击 removefile 的 dropzone div答案

【问题标题】：Dropzone: How to get dropzone div inside which removefile is clicked on some thumbnail imageDropzone：如何获取在某个缩略图上单击 removefile 的 dropzone div
【发布时间】：2016-03-18 05:04:13
【问题描述】：

我在一个 html 页面中使用多个 dropzone 元素来上传不同类型的图像。当用户上传一些图像时，包含文件名的隐藏输入（上传后从服务器返回）被附加到相应的 div。但是当用户单击其中一个缩略图上的删除文件时，我想从相应的 dropzone 中删除相应的隐藏输入分区。这是代码：

<script>
        $(document).ready(function(){

            var preImage = [];
            <?php if( isset($listing[0]['listing_original_image']) ? !empty($listing[0]['listing_original_image']) : false ){
                $preImage = explode(",", $listing[0]['listing_original_image'] );
                foreach ($preImage as $image ){
                    $imageArr[] =  array(
                        "name" => base_url('/uploads/listing/1/') . "/" .trim($image),
                        "size" => 1,
                        "type" => "image/jpeg"
                        );
                }
            }?>
            <?php if( isset($listing[0]['listing_original_image']) ? !empty($listing[0]['listing_original_image']) : false ){ ?>
            var mockFile = <?php echo json_encode($imageArr); ?>
            <?php } ?>
          //  var mockFile = [{ name: "logo.thumbnail.png", size: 1, type: 'image/jpeg' },{ name: "thumbnail.png", size: 1, type: 'image/jpeg' }];

            Dropzone.autoDiscover = false;
            var dzo = $("#thumbnail_dropzone").dropzone({
                url: "<?php echo base_url('Upload/uploadListingImages'); ?>",
                addRemoveLinks : true,
                acceptedFiles : "image/*",
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 2, // MB
                init: function(){
                    var dp = this;
                    dp.on('addedfile', function(file){
                        // alert(file);
                    });
                    dp.on('success', function(file, response){
                        $("#thumbnail_dropzone").append($('<input type="hidden" name="listing_images[]" value="'+response.aFileName+'" />'));
                    });
                    dp.on('removedfile', function(file){
                       // code

                    });
                    <?php if( isset($listing[0]['listing_original_image']) ? !empty($listing[0]['listing_original_image']) : false ){ ?>
                            // console.log(mockFile);
                        for(var i=0; i<mockFile.length; i++){
                            this.options.addedfile.call(this, mockFile[i]);
                            //this.options.thumbnail.call(this, mockFile, "http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png");
                            this.options.thumbnail.call(this, mockFile[i], mockFile[i].name);
                            mockFile[i].previewElement.classList.add('dz-success');
                            mockFile[i].previewElement.classList.add('dz-complete');
                        }
                    <?php } ?>
                }
            });
        });
</script>

【问题讨论】：

标签： javascript jquery dropzone.js

【解决方案1】：

我看到您为added_file、success 和removed_file 设置了事件处理程序。
成功后，您使用文件名创建了一个隐藏的输入文件。您应该为输入分配一个 id 属性，例如：

dp.on('success', function(file, response){
  $("#thumbnail_dropzone").append($('<input type="hidden" name="listing_images[]" value="'+response.aFileName+'" id="'+response.someId+'"/>'));
});

然后你可以使用 id 来销毁，我的意思是删除隐藏的输入。见

dp.on('removedfile', function(file){
$("#response.someid").remove();
});

【讨论】：