lösche Dateiminiatur von Dropzone

Question

Unten ist der Code, den ich verwende, um Bilder durch Dropzone hochzuladen.

<script> 

    Dropzone.options.uploaddeadlineimages = { 

    // The camelized version of the ID of the form element 
    // The configuration 
    paramName: 'files',  
    url:"<?=base_url()."Product/upload_listing_images";?>", 
    dictDefaultMessage: "<img src='<?=base_url()."public/images/";?>/frontend/camera-black.png'><h2>Drag and drop your photos here to upload</h2><p><a href='javascript:void(0)'>Or Click here to browse for photos</a></p>", 
    uploadMultiple: false, 
    createImageThumbnails: true, 
    addRemoveLinks: true, 
    parallelUploads:100, 
    dictInvalidFileType:'Please upload only valid file type(png,jpg,gif,pdf)', 
    clickable:true, 
    maxFiles:100, 
    autoProcessQueue: true, 

    success: function(file, response) { 
     var return_value = response; 
     var old_value = $('#listing_images').val(); 
     if(old_value=="" || old_value==" " || old_value==null){ 
      var new_value = return_value; 
     }else{ 
      var new_value = old_value+","+return_value; 
     } 
     $('#listing_images').val(new_value); 
    }, 


    // The setting up of the dropzone 

    init: function() { 
    var myDropzone = this; 
    //alert after success 

    this.on('queuecomplete', function(file, resp){ 
     //alert('hahahahahaha'); 
    }); 
    // First change the button to actually tell Dropzone to process the queue. 

    document.getElementById("create_listing_button").addEventListener("click", function(e) { 

     // Make sure that the form isn't actually being sent. 


    }); 
    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead 

    // of the sending event because uploadMultiple is set to true. 

    this.on("sendingmultiple", function() { 
    }); 

    this.on("successmultiple", function(files, response) { 

     // Gets triggered when the files have successfully been sent. 

     // Redirect user or notify of success. 

    }); 

    this.on("errormultiple", function(files, response) { 

     // Gets triggered when there was an error sending the files. 

     // Maybe show form again, and notify user of error 

    }); 

    } 
} 
    </script> 

der Code hat diese parth, die verwendet wird, um den neuen Dateinamen in verborgene Feld anhängen, so dass ich dann diese Namen in der Datenbank speichern können. aber das Problem ist, dass, wenn ich auf Löschungknopf klicke, ich den Namen dieser Akte vom versteckten Feld auch löschen muss. Ich erhalte einen verschlüsselten Namen vom Server.

success: function(file, response) { 
     var return_value = response; 
     var old_value = $('#listing_images').val(); 
     if(old_value=="" || old_value==" " || old_value==null){ 
      var new_value = return_value; 
     }else{ 
      var new_value = old_value+","+return_value; 
     } 
     $('#listing_images').val(new_value); 
    }, 

Ich brauche nicht den genauen Code. Ich brauche nur eine Methode, mit der ich den neuen Dateinamen an eine Funktion übergeben kann, wenn ich auf die Schaltfläche Löschen klicke. dies sollte nicht verhindern, dass das Löschen es tun Standardfunktion

Answer 1

gut ich fand eine Antwort. Aktualisieren Sie einfach den Erfolgsteil nach Ihren Bedürfnissen. aber wie in meinem Fall brauchte ich den Bildnamen als ID des Vorschauelements. es wird auf diese Weise gemacht werden.

success: function(file, response) { 
     var return_value = response; 
     var old_value = $('#listing_images').val(); 
     if(old_value=="" || old_value==" " || old_value==null){ 
      var new_value = return_value; 
      file.previewElement.id = response; 
     }else{ 
      file.previewElement.id = response; 
      var new_value = old_value+","+return_value; 
     } 
     $('#listing_images').val(new_value);  
    }, 

den Wert der Liste zu ändern, nachdem Schaltfläche Löschen nur den folgenden Code in dropzone.js Datei hinzufügen (genau so, wie ich es tat). der Code aus Zeilennummer beginnt 274. es gerade dieser

removeFileEvent = (function(_this) { 
      return function(e) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       if (file.status === Dropzone.UPLOADING) { 
       return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function() { 
        return _this.removeFile(file); 
       }); 
       } else { 
       if (_this.options.dictRemoveFileConfirmation) { 
        return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function() { 

        return _this.removeFile(file); 

        }); 
       } else { 

       return _this.removeFile(file); 

       } 
       } 
      }; 
      })(this); 
      _ref2 = file.previewElement.querySelectorAll("[data-dz-remove]"); 
      _results = []; 
      for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) { 
      removeLink = _ref2[_k]; 
      _results.push(removeLink.addEventListener("click", removeFileEvent)); 

      } 
      return _results; 
     } 
     }, 

dazu aus ändern (nur vier Zeilen hinzugefügt. Es sorgfältig tun, sonst kann man vermasseln alle)

removeFileEvent = (function(_this) { 
      return function(e) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       if (file.status === Dropzone.UPLOADING) { 
       return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function() { 
        return _this.removeFile(file); 
       }); 
       } else { 
       if (_this.options.dictRemoveFileConfirmation) { 
        return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function() { 
        var id = $(this).closest("div").prop("id"); 
        update_img_list(id); 
        return _this.removeFile(file); 

        }); 
       } else { 
        var id = $(this).closest("div").prop("id"); 
        update_img_list(id); 
       return _this.removeFile(file); 

       } 
       } 
      }; 
      })(this); 
      _ref2 = file.previewElement.querySelectorAll("[data-dz-remove]"); 
      _results = []; 
      for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) { 
      removeLink = _ref2[_k]; 
      _results.push(removeLink.addEventListener("click", removeFileEvent)); 

      } 
      return _results; 
     } 
     }, 

diese Funktion hinzufügen am Ende der Dateiänderung ('#listing_images') zu ('#id_of_your_field_which_contains_the_list')

function update_img_list(id){ 

    var list = $('#listing_images').val(); 
    separator = ","; 
    var values = list.split(separator); 
    for(var i = 0 ; i < values.length ; i++) { 
    if(values[i] == id) { 
     values.splice(i, 1); 
     $('#listing_images').val(values.join(separator)) ; 
    } 
    } 
    return list; 

}