Dropzone ändern: Zeige das hochgeladene Bild in einem anderen div

Question

Ich erstelle ein Profilbild-Uploader mit dropzone.js, und ich habe das Layout kopiert offered by Facebook, aber ich möchte es tun, wenn du das Bild loslässt, Es ersetzt den Inhalt in der Dropzone.

Meine Demo bisher:

Image Link

Mein Code so weit:

Dropzone.options.employeeImageDropzone = { 
maxFiles: 1, 
acceptedFiles: 'image/*', 
addRemoveLinks: true, 
dictDefaultMessage: '<strong>Upload a Photo</strong><br/><small class="muted">From your computer</small>', 
paramName : 'empImage', 
init: function() { 
    this.on("success", function(file, responseText) { 
     $('#nextStep').html('<a href="<?php echo 'employee?id='.$empID.'&step=3'; ?>" class="button form-button">Next</a>').css('display','block'); 
    }); 
    this.on("removedfile", function (file) { 
     $.get("upload-image.php", {id: <?php echo $empID; ?>, get: "1"}).done(function(data) {}); 
    }); 
} 
}; 

Was würde Ich mag es, wenn das Bild hochladen, wird der Text " Laden Sie ein Foto von Ihrem Computer "wird durch einen Fortschrittsbalken ersetzt, und sobald der Upload abgeschlossen ist, geht die Miniaturvorschau in das Div, das c Momentan ist DP drin (Das ist ein div, kein Bild), und ersetzt dann die Fortschrittsanzeige durch eine "Entfernen" -Schaltfläche, die, wenn sie gedrückt wird, das Bild aus der Vorschau entfernt (links) und die Dropzone zum Starten zurücksetzt nochmal.

Wo ich feststecke ist der Upload-Fortschritt, Bildvorschau und Reset-Teil. Ich bin mir nicht sicher, welche Funktionen zu verwenden sind, und die Website-Dokumentation zeigt nicht wirklich, was jede dieser Funktionen zurückgibt oder wie man sie benutzt.

ich das Formular Arbeits haben und es tut, was ich brauche es, es ist nur die Formatierung und Styling Ich brauche Hilfe mit :)

Answer 1

ich mit einigen Funktionen tun dies endete und einige CSS

Javascript:

Dropzone.options.employeeImageDropzone = { 
    maxFiles: 1, 
    acceptedFiles: 'image/*', 
    addRemoveLinks: true, 
    dictDefaultMessage: '<strong>Upload a Photo</strong><br/><small class="muted">From your computer</small>', 
    paramName : 'empImage', 
    thumbnailWidth:'200', 
    thumbnailHeight:'200', 
    init: function() { 
     this.on("success", function(file, responseText) { 
      document.querySelector(".dz-progress").style.opacity = "0"; 
      $('#nextStep').html('<a href="<?php echo 'employee?id='.$empID.'&step=3'; ?>" class="button form-button">Next</a>'); 
     }); 
     this.on("thumbnail", function(file, dataUrl) { 
      $('#dz-preview').html('<img src="'+dataUrl+'" width="200" height="200" alt="<?php echo $empNameFull; ?>">'); 
     }); 
     this.on("removedfile", function (file) { 
      $.get("upload-image.php", {id: <?php echo $empID; if(isset($oldImage) && !empty($oldImage)) {echo ', old: "'.$oldImage.'" ';} ?>, get: "1"}).done(function(data) {}); 
      $('#nextStep').html('<a href="<?php echo 'employee?id='.$empID.'&step=3'; ?>">Skip this step</a>'); 
     }); 
     this.on("reset", function (file) { 
      $('#dz-preview').html('<?php echo $previousData; ?>');     
     }); 
    } 
}; 

CSS:

#employee-image-dropzone.dropzone .dz-preview, #employee-image-dropzone .dropzone-previews .dz-preview {background:transparent;position:inherit;display:block;margin:0;vertical-align:middle;border:none;padding:0;margin-top:60px;text-align:center;} 
#employee-image-dropzone.dropzone .dz-preview .dz-progress, #employee-image-dropzone .dropzone-previews .dz-preview .dz-progress {top:-25px;} 
#employee-image-dropzone.dropzone .dz-preview .dz-details, #employee-image-dropzone.dropzone .dz-preview .dz-success-mark, #employee-image-dropzone.dropzone .dz-preview .dz-error-mark, #employee-image-dropzone.dropzone .dz-preview .dz-error-message {display:none;} 
#employee-image-dropzone.dropzone .dz-preview .dz-remove {border: 2px solid #F7931D;color: #F7931D;padding: 6px 20px !important;} 

die wie folgt

und setzt zum letzten Zustand auf Entfernung

suchen landet