Question

我想添加一个属性来删除上传后的链接：

$(file.previewTemplate).find('.dz-remove').attr('id', response.fileID);

成：

 init: function() {
    var thisDropzone = this;
    $.get("url", function( data ) {
        // alert("Done");
        // console.log("Data: ", data);
        $.each(data, function(key,value){ //loop through it
            console.log(value);
        var mockFile = { name: value.image_file_name, size: value.image_file_size }; // here we get the file name and size as response 

        thisDropzone.options.addedfile.call(thisDropzone, mockFile);

        thisDropzone.options.thumbnail.call(thisDropzone, mockFile, value.url); //uploadsfolder is the folder where you have all those uploaded files
        // file.previewElement.classList.add("dz-success"); 
        thisDropzone.emit("complete", mockFile); // remove process bar
        // thisDropzone.find('.dz-remove').attr('id', value.id); => here


    });
      }, "json" );
  }

我该怎么做？谢谢你的帮助！

Answer 1

如果您要在上传后删除文件，可以在此处使用dropzone js上传多个文件，您必须遵循以下代码。在此代码中，涵盖了以下几点
1.您可以上传多张图片
2.从服务器上删除文件

$("#imageStorage").dropzone({
            init: function() {
                var thisDropzone = this;
                var json_data = <?php echo json_encode(explode(',',$this->layout()->EditableData['listing_space_images']));?>;
                var old_data_json = <?php echo json_encode(explode(',',$this->layout()->EditableData['listing_space_orignalname']));?>;
                $.each(json_data, function(key,value){ 
                    if(value != ''){
                        var mockFile = { name: old_data_json[key], size: value, status: Dropzone.ADDED};
                        thisDropzone.options.addedfile.call(thisDropzone, mockFile);
                        thisDropzone.options.thumbnail.call(thisDropzone, mockFile, storage_img_path+'/thumb/'+value);
                    }
                });
            },
            maxFiles: 2000,
            url: baseUrl + "/storage_image",
            success: function (file, response) {
                var result = jQuery.parseJSON(response);
                var image_name = result['media_path'];
                var orignal = file.name ;
                var oldname = $('#orignalname').val();
                var value=  $('#input_image_container').val();
                $('.dz-remove').attr('id',image_name);
                if(value == ''){
                           //set orignal name and new name to the hidden input field when input field is null
                    $('#input_image_container').val(image_name);
                    $('#orignalname').val(orignal);
                }
                else{
                 //set orignal name and new name to the hidden input field when input field is not null
                    value = value + ',' +image_name;
                    oldname = oldname +','+orignal;
                    $('#input_image_container').val(value);
                    $('#orignalname').val(oldname);
                }   
            },
            error:function(file){
                var _this = this;
                _this.removeFile(file); 
                //error when select invalid file 
            },
            acceptedFiles: "image/*",
            accept: function(file, done) {
                if (file.type != "image/jpeg") {
                    done("Error! Files of this type are not accepted");
                }
                else { done(); }
            },
            autoDiscover: false,
            addRemoveLinks:true,
            previewsContainer: "#previewContainer",
            removedfile:function(file){
                var _this = file;
                var orignal= $('#orignalname').val();
                var changed = $('#input_image_container').val();
                $.ajax({
                    url: baseUrl + "/delete_image/"+_this.name,
                    type: "POST",
                    data:{orignalname :orignal,server_name:changed},
                    dataType:'Text',
                    success:function(result){
                        if(result){
                           //Sucess Code when image delete from server using ajax
                            }else{
                                //Error code
                            }
                        }else{
                            //Error code
                        }
                    }
                }); 

            }
        });

如何在使用ajax将图像预加载到dropzone后添加属性以删除链接？

1 个答案: