Sửa đổi Dropzone: Hiển thị hình ảnh đã tải lên trong div

Question

Tôi đang tạo trình tải lên hình ảnh hồ sơ bằng cách sử dụng dropzone.js và tôi đã sao chép bố cục offered by Facebook, nhưng điều tôi muốn làm là khi bạn thả hình ảnh, nó thay thế nội dung bên trong vùng thả xuống.

bản demo của tôi cho đến nay:

Image Link

Mã của tôi cho đến nay:

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

Vì vậy, những gì tôi muốn là khi hình ảnh được tải lên, các văn bản " Tải lên ảnh từ máy tính của bạn "được thay thế bằng thanh tiến trình, sau đó khi tải lên hoàn tất, xem trước hình thu nhỏ sẽ chuyển vào div Hiện tại có DP trong đó (đó là div, không phải hình ảnh), và sau đó thay thế thanh tiến trình bằng nút "xóa", nếu nhấn sẽ xóa hình ảnh khỏi bản xem trước (ở bên trái) và đặt lại vùng thả xuống để bắt đầu lần nữa.

Nơi tôi bị kẹt là tiến trình tải lên, xem trước hình ảnh và đặt lại phần. Tôi không chắc chắn nên sử dụng các chức năng nào và tài liệu trang web không thực sự hiển thị những chức năng nào sẽ trả lại hoặc cách sử dụng chúng.

Tôi có làm việc hình thức và nó làm những gì tôi cần nó để, nó chỉ là định dạng và phong cách Tôi cần giúp đỡ :)

Answer 1

tôi đã kết thúc làm điều này với một số chức năng và một số 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;} 

nào kết thúc lên tim như thế này

Và reset lại trạng thái cuối cùng trên loại bỏ