«
»
JavaScriptWEB

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

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

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

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

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

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

<script src="path-to-dropzone/dropzone.js"></script>

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

<form action="/upload-handling-script" class="dropzone" id="my-dropzone"></form>

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

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

Dropzonejs демо

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

<form action="/upload-handling-script" class="dropzone"> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form>

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

Вы можете обработать запрос на сервере так, как если бы он исходил из обычной 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.options.dropzoneElement = { maxFilesize: 500, autoProcessQueue: false, init: function() { var submitButton = document.querySelector("#btnUpload") myDropzone = this; submitButton.addEventListener("click", function() { /* Check if file is selected for upload */ if (myDropzone.getUploadingFiles().length === 0 && myDropzone.getQueuedFiles().length === 0) { alert('No file selected for upload'); return false; } else { /* Remove event listener and start processing */ myDropzone.removeEventListeners(); myDropzone.processQueue(); } }); /* On Success, do whatever you want */ this.on("success", function(file, responseText) { alert('Success'); }); } };

Отправка дополнительных данных с помощью 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 для получения дополнительных параметров конфигурации и событий.

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

Источник записи: https://thedebuggers.com

Связанные записи
WEBWordPress

Как добавить «Режим чтения» в ваши сообщения на блоге

WEBWordPress

6 важных тенденций SEO на 2020 год и последующий период (наши мысли)

WEB

Beaker Browser - Одноранговый браузер для веб-хакеров и разработчиков.

Chrome DevToolsGoogleGoogle ChromeWEB

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools