Dropzone.js – загрузчик картинок с помощью HTML5 Drag-and-drop. Также позволяет грузить с помощью клика.
В FAQ описан способ отображение уже загруженных картинок на сервере. Однако при использовании этого способа следует учитывать, что файлы не появятся в массиве myDropzone.files.
Также, плагин не добавляет в форму поле с адресом загруженной картинки – это нужно делать либо самому через javascript событие, либо на серверной стороне при загрузке файла.
Для изменения шаблона, по которому потом будет отображаться файл можно воспользоваться параметром previewTemplate, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
myDropzone = new Dropzone( "div#dropzone-<?php echo $id;?>", { url: "/Core/Media/Upload", uploadMultiple:false, multiple:false, addRemoveLinks:false, dictDefaultMessage: '<i class="attach-file"></i>Прикрепить файл', params: <?php echo CJSON::encode(array( $csrfTokenName=>$csrfToken, ));?>, paramName: 'FileUploads[file]', previewTemplate: $.trim($('#previewTemplate').html()) } ); |
И внутри HTML:
|
1 2 3 4 5 6 7 8 |
<div id="previewTemplate" class="hide"> <div class="form-uploadedFile"> <div class="filename"><span data-dz-name></span></div> <div class="size" data-dz-size></div> <div class="progress"><div class="bar" data-dz-uploadprogress></div></div> <div class="error-message"><span data-dz-errormessage></span></div> </div> </div> |
Link to this post!