Перетащите ajax-файл с помощью DropzoneJS и PHP

Хотите внедрить перетаскивание файлов AJAX? Это никогда не было проще. С DropzoneJS и PHP это очень просто.

DropzoneJS или Dropzone.js – это легковесная библиотека javascript с открытым исходным кодом, которая позволяет загружать файлы с помощью перетаскивания и предварительного просмотра изображений.

Мы начнем этот пост с базовой установки Dropzone . Затем мы сделаем базовую обработку файлов на сервере. И, наконец, мы проверим некоторые важные параметры конфигурации, предоставляемые DropzoneJS.

Как установить DropzoneJS?

Установить dropzone.js довольно просто. Вам просто нужно скачать автономный файл и включить его в свою HTML-страницу, как

Обычно мы используем Dropzone, создавая элемент формы с классом dropzone следующим образом:

Dropzone автоматически присоединяется к элементам формы с классом dropzone. Когда файлы помещаются в него, они будут отправлены в указанный атрибут действия. Загруженные файлы могут быть обработаны так же, как если бы был ввод html-файла с именем file.

Элемент формы будет выглядеть так:

Если вы хотите, чтобы загрузка файлов работала даже без JavaScript, вы можете включить элемент с классом отката. В следующем коде используется резервный класс:

Обработка загрузки файлов на сервер

Вы можете обработать запрос на сервере так, как если бы он исходил из обычной HTML-формы. Следующий код PHP выполняет базовую загрузку файлов:

if (!empty($_FILES)) {
  $tempFile = $_FILES['file']['tmp_name']; 
  $targetFile = 'new_fine_name';
  move_uploaded_file($tempFile, $targetFile);
}

Пока что мы создали базовый интерфейс перетаскивания с использованием dropzone. Также у нас есть простой PHP-скрипт для обработки загрузки файлов. Теперь мы будем настраивать перетаскивание, используя различные параметры конфигурации.

Если у вас есть HTML-элементы с классом dropzone, вы можете настроить dropzones с объектом Dropzone.options следующим образом:

Dropzone.options.dropzoneElement = {
  'option' : 'value'
}

где « dropzoneElement » является camelized версия ID HTML – элемента.

Ограничение количества файлов, размера файла и типа файла в зоне сброса

Вы можете ограничить количество файлов, используя опцию « maxFiles ». Кроме того , вы можете ограничить максимальный размер файла допустимый и тип файла с помощью опций « MaxFileSize » и « acceptedFiles » соответственно.

Dropzone.options.dropzoneElement = {
  maxFiles: 1,
  maxFilesize: 500, // File size in Mb
  acceptedFiles: 'application/pdf'
}

Предотвращение автоматической загрузки (автоматический процесс)

Устанавливая autoProcessQueue к ложным, вы можете предотвратить файлы , которые будут загружены автоматически. Эта опция очень полезна, если вы используете кнопку внешнего элемента, например, для запуска обработки файла или отправки всех файлов одновременно. В следующем фрагменте для отправки файла используется кнопка с идентификатором « btnUpload ».

Отправка дополнительных данных с помощью dropzone

Теперь давайте узнаем, как отправить дополнительные данные или параметр с помощью dropzone.

Как и в предыдущем примере, мы можем использовать dropzone другое событие для выполнения этой задачи.

Событие ‘ send ‘ вызывается непосредственно перед отправкой каждого файла. Вот код:

Dropzone.options.dropzoneElement = {

  init: function() {

    this.on("sending", function(file, xhr, formData) {
      formData.append("status", 'new');
      formData.append("user_id", 1);

    });


    this.on("success", function(file, responseText) {         
      alert('Success');
    });
  }   
};

В заключении

Dropzone.js – очень полезный инструмент. Это очень удобно и гибко. Проверьте документацию Dropzone для получения дополнительных параметров конфигурации и событий.

Надеюсь этот пост очень полезен. Пожалуйста, не стесняйтесь добавить свой вопрос, оставив комментарий ниже.