Modyfikuj Dropzone: Pokaż przesłany obraz w innym dziale

Question

Tworzę obraz przesyłający obraz profilu za pomocą dropzone.js, a ja w pewien sposób skopiowałem układ offered by Facebook, ale to, co chcę zrobić, to po upuszczeniu obrazu, zastępuje zawartość wewnątrz strefy zrzutów.

Moje demo tej pory:

Image Link

Mój kod do tej pory:

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) {}); 
    }); 
} 
}; 

Więc co chciałbym jest, gdy obraz jest przesłanie, tekst " Prześlij zdjęcie z komputera "zostaje zastąpione paskiem postępu, a po zakończeniu przesyłania podgląd miniatury przechodzi do elementu div, który zręcznie ma w nim DP (to jest div, a nie obraz), a następnie zastępuje pasek postępu przyciskiem "usuń", który po naciśnięciu usunie obraz z podglądu (po lewej) i zresetuje strefę zrzutową, aby rozpocząć jeszcze raz.

Tam, gdzie utknąłem, to postęp przesyłania, podgląd obrazu i resetowanie części. Nie jestem pewien, z których funkcji korzystać, a dokumentacja witryny nie pokazuje właściwie, co każda z tych funkcji zwraca i jak z nich korzystać.

mam pracę formularz i robi to co muszę go, to tylko formatowanie i stylizacji Potrzebuję pomocy :)

Answer 1

skończyło się to zrobić z niektórych funkcji i jakiś 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;} 

który kończy się patrząc jak ten

i resetuje do ostatniego stanu po usunięciu