2014-09-03 2 views
5

Я создаю загрузчик изображений профиля, используя dropzone.js, и я как бы скопировал макет offered by Facebook, но то, что я хочу, это когда вы бросаете изображение, он заменяет содержимое внутри dropzone.Изменить Dropzone: Показать загруженное изображение в другом div

Мой демо до сих пор:

enter image description here

Image Link

Мой код до сих пор:

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

Так что я хотел бы, когда изображение загрузки, текст " Загрузить фотографию с вашего компьютера »заменяется индикатором выполнения, а затем, как только загрузка завершена, предварительный просмотр миниатюр переходит в div, что c В настоящее время в нем есть DP (это div, а не изображение), а затем заменить индикатор выполнения кнопкой «удалить», которая при нажатии приведет к удалению изображения из предварительного просмотра (слева) и сбросу dropzone для запуска еще раз.

Где я застреваю - это ход загрузки, предварительный просмотр изображения и сброс части. Я не уверен, какие функции использовать, а документация на сайте фактически не показывает, что возвращает каждая из этих функций или как их использовать.

У меня есть форма работать, и это делает то, что мне это нужно, чтобы это просто форматирование и стиль мне нужна помощь :)

ответ

8

Я закончил тем, что делал это с некоторыми функциями и некоторые 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;} 

Который заканчивает тем, как этот

enter image description here

И возвратов к последнему состоянию на удаление

Смежные вопросы