Как загрузить изображения в dropzone.Яш

У меня есть dropzone.экземпляр js на веб-странице со следующими параметрами:

autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20

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

цель состоит в том, чтобы мои пользователи могли использовать dropzone для управления изображениями для элемента, поэтому, когда я загружаю представление "редактировать / обновлять" для элемента, я хотел бы предварительно загрузить dropzone с изображениями, которые ранее были загружены для этого пункт. Есть ли хороший способ реализовать это, чтобы уже существующие элементы не загружались повторно при отправке изменений в список изображений?

25
dropzone.js preloading preview

2 ответов

правильный способ сделать это, чтобы использовать .испустите метод, предоставленный on dropzone js, чтобы добавить файл и миниатюру для предварительной загрузки изображений с сервера. См. пример кода ниже. Взято из https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");

.метод emit из dropzone запустит функцию init, и если у вас есть обратный вызов события addedfile, написанный для него. например, я использую addedfile event add remove button, а также прикрепленное удаление функциональность изображения.

34

Dropzone настолько сильный и удивительный, что вы можете сделать что-нибудь на нем .
Действия -- >

1) Прежде всего вам нужно будет создать скрипт на стороне сервера, который будет получите все имена файлов и их размер и отправьте его как ответ json.
PHP код : 

  foreach($myitemfiles as $file){ //get an array which has the names of all the files and loop through it 
        $obj['name'] = $file; //get the filename in array
        $obj['size'] = filesize("uploadsfolder/".$file); //get the flesize in array
        $result[] = $obj; // copy it to another array
      }
       header('Content-Type: application/json');
       echo json_encode($result); // now you have a json response which you can use in client side

2) Теперь вы можете использовать ответ для отображения загруженных файлов.Напишите приведенный ниже код внутри функции init dropzone
Код Javascript :

  init: function() {

      var thisDropzone = this;

        $.getJSON('get_item_images.php', function(data) { // get the json response

            $.each(data, function(key,value){ //loop through it

                var mockFile = { name: value.name, size: value.size }; // here we get the file name and size as response 

                thisDropzone.options.addedfile.call(thisDropzone, mockFile);

                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploadsfolder/"+value.name);//uploadsfolder is the folder where you have all those uploaded files

            });

        });
}

Примечание : не берите весь путь url файла в filename просто возьмите само имя файла, вот и все .
это работает

27