Question

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

<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>

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

Dropzone：如何获取dropzone div，其中在一些缩略图图像上单击了removefile

1 个答案: