Загрузка js файла: Возобновляемая загрузка файлов

alexxlab

Драг-н-дроп для загрузки файлов — Рецепты — Дока

Задача

Скопировано

Загрузка пользователем файлов на сервер — часто встречающаяся задача при создании сайтов и приложений. Текущие возможности JavaScript позволяют нам выбирать нужный файл простым его перетаскиванием в установленную область страницы браузера.

Широкую поддержку событий перетаскивания обеспечивают современные десктопные браузеры, среди мобильных браузеров такая поддержка пока низкая. Поэтому, если необходимо реализовать передачу файла на сервер также и для пользователей мобильных устройств, стоит добавлять возможность выбрать файл с использованием элемента <input type="file">.

В статье будет рассматриваться вариант выбора файла с использованием перетаскивания.

Загрузка файла на сервер состоит из трёх частей:

  1. Выбор пользователем файла на своём устройстве.
  2. Проверка параметров обработки файла и формирование данных с обращением к серверу.
  3. Обработка данных на сервере и отправка ответа клиенту.

Организовать полный процесс загрузки файла возможно только с использованием серверной части, реализация которой выходит за рамки данной статьи. Поэтому далее будет рассмотрена организация отправки файла на стороне клиента: HTML-разметка, стилизация элементов и JS-код для передачи файла на сервер.

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

Решение для загрузки файла

Скопировано

На странице разместим HTML-разметку с необходимыми элементами:

<div>  <div>    <div>      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">        <path fill="#fff" d="M73 50c0-12.7-10.3-23-23-23S27 37.3 27 50m3.9 0c0-10.5 8.5-19.1 19.1-19.1S69.1 39.5 69.1 50">          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/>        </path>      </svg>    </div>    <p>Для загрузки изображения перетащите его в эту область</p>    <p></p>  </div></div>
          <div>
  <div>
    <div>
      <svg xmlns="http://www. w3.org/2000/svg" viewBox="0 0 100 100">
        <path fill="#fff" d="M73 50c0-12.7-10.3-23-23-23S27 37.3 27 50m3.9 0c0-10.5 8.5-19.1 19.1-19.1S69.1 39.5 69.1 50">
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/>
        </path>
      </svg>
    </div>
    <p>Для загрузки изображения перетащите его в эту область</p>
    <p></p>
  </div>
</div>

Для внешнего оформления элементов создадим следующие CSS-правила:

p {  text-align: center;}.upload-zone {  position: relative;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  width: 100%;  height: 250px;  padding: 55px 40px;  overflow: hidden;  background-color: #C56FFF;  color: #000000;  font-size: 24px;  font-weight: 500;}.upload-zone_dragover {  background-color: #593273;}.upload-hint {  display: none;}.upload-hint_visible {  display: block;  pointer-events: none;}.
  upload-loader {  display: none;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}.upload-loader_visible {  display: flex;  justify-content: center;  align-items: center;  background-color: #593273;}.upload-loader__image {  width: 150px;  height: 150px;}
          p {
  text-align: center;
}
.upload-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 250px;
  padding: 55px 40px;
  overflow: hidden;
  background-color: #C56FFF;
  color: #000000;
  font-size: 24px;
  font-weight: 500;
}
.upload-zone_dragover {
  background-color: #593273;
}
.upload-hint {
  display: none;
}
.upload-hint_visible {
  display: block;
  pointer-events: none;
}
.upload-loader {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.upload-loader_visible {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #593273;
}
.upload-loader__image {
  width: 150px;
  height: 150px;
}

В конце HTML-страницы или в отдельном JS-файле добавим код, который обеспечит связь между пользователем и сервером:

const BYTES_IN_MB = 1048576const dropFileZone = document. getElementById('dropFile_Zone')const hintText = document.getElementById('uploadFile_Hint')const outputText = document.getElementById('uploadFile_Status')const loaderImage = document.getElementById('uploadFile_Loader')let fileInstance['dragover', 'drop'].forEach(function(event) {  document.addEventListener(event, function(evt) {    evt.preventDefault()    return false  })})dropFileZone.addEventListener('dragenter', function(event) {  dropFileZone.classList.add('upload-zone_dragover')})dropFileZone.addEventListener('dragleave', function(event) {  dropFileZone.classList.remove('upload-zone_dragover')})dropFileZone.addEventListener('drop', function(event) {  fileInstance = event.dataTransfer.files[0]  if (fileInstance.size > 5 * BYTES_IN_MB) {    alert('Принимается файл до 5 МБ')    return false  }  if (fileInstance.type.startsWith('image/')) {    processingUploadFile(fileInstance)  } else {    alert('Можно загружать только изображения')    return false  }})function processingUploadFile(fileInstanceUpload) {  if(fileInstanceUpload != undefined) {    const dropZoneData = new FormData()    const xhr = new XMLHttpRequest()    dropZoneData.
  append('file', fileInstanceUpload)    xhr.upload.addEventListener('progress', function() {      hintText.classList.remove('upload-hint_visible')      loaderImage.classList.add('upload-loader_visible')    })    xhr.open('POST', 'upload_processing.php', true)    xhr.send(dropZoneData)    xhr.onload = function (event){      if (xhr.status == 200) {        loaderImage.classList.remove('upload-loader_visible')        outputText.textContent = `Файл «${fileInstanceUpload.name}» загружен успешно`      } else {        loaderImage.classList.remove('upload-loader_visible')        outputText.textContent = `Файл не загружен. Ошибка ${xhr.status} при загрузке файла.`      }    }  }}
          
 
const BYTES_IN_MB = 1048576
const dropFileZone = document.getElementById('dropFile_Zone')
const hintText = document.getElementById('uploadFile_Hint')
const outputText = document.getElementById('uploadFile_Status')
const loaderImage = document.getElementById('uploadFile_Loader')
let fileInstance
['dragover', 'drop']. forEach(function(event) {
  document.addEventListener(event, function(evt) {
    evt.preventDefault()
    return false
  })
})
dropFileZone.addEventListener('dragenter', function(event) {
  dropFileZone.classList.add('upload-zone_dragover')
})
dropFileZone.addEventListener('dragleave', function(event) {
  dropFileZone.classList.remove('upload-zone_dragover')
})
dropFileZone.addEventListener('drop', function(event) {
  fileInstance = event.dataTransfer.files[0]
  if (fileInstance.size > 5 * BYTES_IN_MB) {
    alert('Принимается файл до 5 МБ')
    return false
  }
  if (fileInstance.type.startsWith('image/')) {
    processingUploadFile(fileInstance)
  } else {
    alert('Можно загружать только изображения')
    return false
  }
})
function processingUploadFile(fileInstanceUpload) {
  if(fileInstanceUpload != undefined) {
    const dropZoneData = new FormData()
    const xhr = new XMLHttpRequest()
    dropZoneData.append('file', fileInstanceUpload)
    xhr.upload.addEventListener('progress', function() {
      hintText.
  classList.remove('upload-hint_visible')
      loaderImage.classList.add('upload-loader_visible')
    })
    xhr.open('POST', 'upload_processing.php', true)
    xhr.send(dropZoneData)
    xhr.onload = function (event){
      if (xhr.status == 200) {
        loaderImage.classList.remove('upload-loader_visible')
        outputText.textContent = `Файл «${fileInstanceUpload.name}» загружен успешно`
      } else {
        loaderImage.classList.remove('upload-loader_visible')
        outputText.textContent = `Файл не загружен. Ошибка ${xhr.status} при загрузке файла.`
      }
    }
  }
}
Открыть демо в новой вкладке

Полный вариант загрузки файла с его сохранением на сервере выглядит так:

Разбор решения

Скопировано

Разметка

Скопировано

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

  • анимированный
    svg-элемент     в качестве индикатора обработки файла;
  • текстовый элемент с идентификатором uploadFile_Status, который покажет информацию о результате загрузки.

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

<div>  <div>    <div>      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">        <path fill="#fff" d="M73 50c0-12.7-10.3-23-23-23S27 37.3 27 50m3.9 0c0-10.5 8.5-19.1 19.1-19.1S69.1 39.5 69.1 50">          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/>        </path>      </svg>    </div>    <p>Для загрузки изображения перетащите его в эту область</p>    <p></p>  </div></div>
          
 
<div>
  <div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path fill="#fff" d="M73 50c0-12.7-10.3-23-23-23S27 37.3 27 50m3. 9 0c0-10.5 8.5-19.1 19.1-19.1S69.1 39.5 69.1 50">
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/>
        </path>
      </svg>
    </div>
    <p>Для загрузки изображения перетащите его в эту область</p>
    <p></p>
  </div>
</div>

Для показа процесса выполнения загрузки файла также можно использовать специальный элемент <progress>

— этот вариант подробно рассмотрен в рецепте «Загрузка файла с прогресс-баром».

Стили

Скопировано

Область для загрузки файла выделим фоновым цветом и укажем фиксированную высоту:

.upload-zone {  position: relative;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  width: 100%;  height: 250px;  padding: 55px 40px;  overflow: hidden;  background-color: #C56FFF;  color: #000000;  font-size: 24px;  font-weight: 500;}
          . upload-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 250px;
  padding: 55px 40px;
  overflow: hidden;
  background-color: #C56FFF;
  color: #000000;
  font-size: 24px;
  font-weight: 500;
}

При перетаскивании файла в область загрузки будем менять фоновый цвет при помощи дополнительного класса:

.upload-zone_dragover {  background-color: #593273;}
          .upload-zone_dragover {
  background-color: #593273;
}

Контейнер с индикатором обработки файла изначально скрыт и с абсолютным позиционированием занимает весь родительский блок:

.upload-loader {  display: none;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}
          .upload-loader {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

После появления файла в области загрузки и до конца его обработки, индикатор будет показываться с использованием дополнительного класса:

. upload-loader_visible {  display: flex;  justify-content: center;  align-items: center;  background-color: #593273;}.upload-loader__image {  width: 150px;  height: 150px;}
          .upload-loader_visible {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #593273;
}
.upload-loader__image {
  width: 150px;
  height: 150px;
}

JavaScript

Скопировано

Для начала объявим переменные и получим все необходимые элементы DOM-дерева, чтобы подписываться на события:

  • переменная BYTES_IN_MB, в которой указывается количество байтов в одном мегабайте, будет использоваться при вычислении размера файла;
  • dropFileZone устанавливает область обработки выбранного файла;
  • hintText указывает на подсказку о загрузке файла;
  • в переменной outputText указывается элемент, в котором будет показан полученный от сервера ответ;
  • переменная loaderImage определяет графический элемент индикатора обработки файла;
  • в переменной fileInstance будут храниться данные выбранного файла.
const BYTES_IN_MB = 1048576const dropFileZone = document.getElementById('dropFile_Zone')const hintText = document.getElementById('uploadFile_Hint')const outputText = document.getElementById('uploadFile_Status')const loaderImage = document.getElementById('uploadFile_Loader')let fileInstance
          const BYTES_IN_MB = 1048576
const dropFileZone = document.getElementById('dropFile_Zone')
const hintText = document.getElementById('uploadFile_Hint')
const outputText = document.getElementById('uploadFile_Status')
const loaderImage = document.getElementById('uploadFile_Loader')
let fileInstance

Поскольку переменная fileInstance объявляется без присвоения значения, используется ключевое слово let. Об отличиях переменных и принципах работы с ними более развёрнуто рассказывается в статье «Переменные const, let и var».

При отслеживании перетаскивания файла будут использоваться следующие события:

  • dragover выполняется во время перемещения файла над областью обработки файла;
  • dragenter срабатывает, когда файл входит в область обработки файла;
  • dragleave срабатывает, если файл покидает область обработки, но ещё не «сброшен»;
  • drop выполняется в тот момент, когда пользователь отпустил кнопку мыши и выбранный файл был помещён («сброшен») в заданную область.

Когда при перетаскивании выбранный файл будет находиться в пределах активной страницы, браузер его откроет. Чтобы файл был обработан в назначенной для этого области, необходимо отменить стандартное поведение браузера для событий dragover и drop путём вызова метода preventDefault():

['dragover', 'drop'].forEach(function(event) {  document.addEventListener(event, function(evt) {    evt.preventDefault()    return false  })})dropFileZone.addEventListener('dragenter', function(event) {  dropFileZone.classList.add('upload-zone_dragover')})dropFileZone.addEventListener('dragleave', function(event) {  dropFileZone.classList.remove('upload-zone_dragover')})
          ['dragover', 'drop'].forEach(function(event) {
  document.addEventListener(event, function(evt) {
    evt.preventDefault()
    return false
  })
})
dropFileZone.addEventListener('dragenter', function(event) {
  dropFileZone. classList.add('upload-zone_dragover')
})
dropFileZone.addEventListener('dragleave', function(event) {
  dropFileZone.classList.remove('upload-zone_dragover')
})

Загрузка файлов большого размера увеличивает нагрузку на сервер, поэтому установим максимальный размер файла в 5 МБ. Проверку размера файла выполним на этапе его помещения в область загрузки. Для этого получим информацию о файле с помощью объекта dataTransfer, который хранит данные о событии перетаскивания. Также зададим условие, что загружать можно будет только изображения.

dropFileZone.addEventListener('drop', function uploadFile(event) {  fileInstance = event.dataTransfer.files[0]  if (fileInstance.size > 5 * BYTES_IN_MB) {    alert('Принимается файл до 5 МБ')    return false  }  if (fileInstance.type.startsWith('image/')) {    processingUploadFile(fileInstance)  } else {    alert('Можно загружать только изображения')    return false  }})
          dropFileZone.addEventListener('drop', function uploadFile(event) {
  fileInstance = event. dataTransfer.files[0]
  if (fileInstance.size > 5 * BYTES_IN_MB) {
    alert('Принимается файл до 5 МБ')
    return false
  }
  if (fileInstance.type.startsWith('image/')) {
    processingUploadFile(fileInstance)
  } else {
    alert('Можно загружать только изображения')
    return false
  }
})

Чтобы отправить файл на сервер без перезагрузки страницы, воспользуемся XMLHttpRequest — набором механизмов для обмена данными между клиентом и сервером без перезагрузки страницы. Подробней о нём можно почитать на MDN.

Основную работу будет выполнять функция processingUploadFile(), которая принимает выбранный пользователем файл fileInstanceUpload и отправляет его на сервер:

function processingUploadFile(fileInstanceUpload) {  if(fileInstanceUpload != undefined) {    // код функции рассматривается ниже  }}
          function processingUploadFile(fileInstanceUpload) {
  if(fileInstanceUpload != undefined) {
    // код функции рассматривается ниже
  }
}

Первым делом объявляем переменные:

  • dropZoneData, в которой с использованием объекта FormData будут храниться данные для отправки на сервер;
  • xhr для обращения к серверу с использованием XMLHttpRequest.
const dropZoneData = new FormData()const xhr = new XMLHttpRequest()
          const dropZoneData = new FormData()
const xhr = new XMLHttpRequest()

После этого указываем последовательность работы XMLHttpRequest при передаче файла на сервер:

  1. Выбранный файл сохраняется для отправки.
  2. Для XMLHttpRequest добавляется обработчик события progress, который отслеживает процесс загрузки файла. Чтобы показать скрытый графический элемент индикатора загрузки, ему добавляется класс upload-loader_visible, а подсказка о загрузке скрывается через удаление класса upload-hint_visible.
  3. Метод open() выполняет POST-запрос к управляющему файлу, который хранится на сервере.
  4. Выбранный пользователем файл передаётся на сервер.
  5. Для XMLHttpRequest выполняется обработка события загрузки файла:
    • если файл сохранён на сервере, индикатор загрузки скрывается и пользователю показывается сообщение об успешной загрузке файла;
    • если файл не принят сервером, индикатор загрузки скрывается и пользователю показывается сообщение об ошибке.
dropZoneData.append('file', fileInstanceUpload)xhr.upload.addEventListener('progress', function() {  hintText.classList.remove('upload-hint_visible')  loaderImage.classList.add('upload-loader_visible')})xhr.open('POST', 'upload_processing.php', true)xhr.send(dropZoneData)xhr.onload = function (event){  if (xhr.status == 200) {    loaderImage.classList.remove('upload-loader_visible')    outputText.textContent = `Файл «${fileInstanceUpload.name}» загружен успешно`  } else {    loaderImage.classList.remove('upload-loader_visible')    outputText.textContent = `Файл не загружен. Ошибка ${xhr.status} при загрузке файла. `  }}
          dropZoneData.append('file', fileInstanceUpload)
xhr.upload.addEventListener('progress', function() {
  hintText.classList.remove('upload-hint_visible')
  loaderImage.classList.add('upload-loader_visible')
})
xhr.open('POST', 'upload_processing.php', true)
xhr.send(dropZoneData)
xhr.onload = function (event){
  if (xhr.status == 200) {
    loaderImage.classList.remove('upload-loader_visible')
    outputText.textContent = `Файл «${fileInstanceUpload.name}» загружен успешно`
  } else {
    loaderImage.classList.remove('upload-loader_visible')
    outputText.textContent = `Файл не загружен. Ошибка ${xhr.status} при загрузке файла.`
  }
}
Открыть демо в новой вкладке

Бесплатный ES5 / ES6 JavaScript плагин для загрузки файлов — Uppy

Один из самых сложных входных данных для проектирования — это загрузка файла. У него есть стиль HTML по умолчанию, но это не самая красивая вещь в мире.

Uppy переводит загрузку файлов на совершенно новый уровень благодаря пользовательскому интерфейсу и динамическому процессу загрузки в стиле Ajax.

Он работает на коде ES5 / ES6, поэтому вы можете создавать свои веб-приложения с последними стандартами JavaScript. И он даже поддерживает загрузку файлов с сайтов облачного хранилища, таких как Dropbox или Google Drive, так что это многогранный скрипт загрузки файлов для Интернета.

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Читайте также: Создание стильной адаптивной формы с CSS3 и HTML5

Uppy полностью бесплатный и с открытым исходным кодом, с репо на GitHub, Однако самый простой способ установить этот плагин — через npm или Yarn, так что вы можете запустить его как настоящий пакет.

Как только вы добавите файлы на свой веб-сайт, вы просто включите файл Uppy.js и код CSS. Затем вы выбираете любое поле ввода, а Uppy позаботится об остальном.

Он имеет уникальный интерфейс, который выглядит как одно большое квадратное размещение для перетаскивания файлов. Вы также можете выбирать элементы с жесткого диска или даже удаленно загружать файлы с внешних URL-адресов. Довольно сумасшедший!

Вы можете найти весь процесс установки на страница документации, но для этого требуется, по крайней мере, некоторое понимание ECMAScript 6. Эта библиотека смотрит в будущее сценариев и не самая простая вещь для использования с чистым ванильным JavaScript.

Но если вы серьезно относитесь к веб-разработке, то в любом случае стоит изучить ES6. Вы можете найти тонны ресурсов в Интернете для самообучения, и вы даже можете использовать Uppy как ваш первый «настоящий» проект, чтобы погрузиться и начать учиться.
Проверьте Пример панели инструментов увидеть Уппи в действии. Для этой страницы загрузка скрыта за триггерной кнопкой, где вы нажимаете кнопку, чтобы отобразить модальное поле загрузки.

Оттуда вы можете выбрать, хотите ли вы загрузить изображение со своего компьютера, из Интернета или даже с веб-камеры!

На странице «Примеры» можно просмотреть несколько групп, включая пример перетаскиваниявместе с интернациональной демонстрационной страницей.

Но, чтобы действительно узнать, как это работает, я рекомендую просмотреть документы и просмотреть основной репозиторий GitHub, Вы также можете поделиться своими мыслями с создателями в Twitter @transloadit,

Читайте также: 4 UX Design Form UX, которые вы должны знать (с примерами)

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

404: Страница не найдена

Страница, которую вы пытались открыть по этому адресу, похоже, не существует. Обычно это результат плохой или устаревшей ссылки. Мы извиняемся за любые неудобства.

Что я могу сделать сейчас?

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

Поиск
  • Узнайте последние новости.
  • Наша домашняя страница содержит самую свежую информацию о Java-разработке.
  • Наша страница «О нас» содержит дополнительную информацию о сайте, на котором вы находитесь, TheServerSide.com.
  • Если вам нужно, свяжитесь с нами, мы будем рады услышать от вас.

Просмотр по категории

Архитектура приложения

  • 5 заслуживающих внимания проблем разработки программного обеспечения для автомобилей

    Современные автомобили оснащены технологиями, но создание автомобильных приложений не всегда является легкой прогулкой. Вот пять уникальных …

  • Новый сервис AWS нацелен на безопасность данных, появится функция genAI

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

  • Разрушение краеугольных компонентов ООП

    Объектно-ориентированное программирование изменило правила игры для тех, кто работает со сложными программными системами. Но каковы ключевые элементы, которые…

Качество ПО

  • Возможности ChatGPT для тестирования программного обеспечения

    ChatGPT может помочь тестировщикам программного обеспечения писать тесты и планировать покрытие. Как команды могут предвидеть будущие возможности тестирования ИИ…

  • Компании розничной торговли получают показатели DORA ROI благодаря специализированным инструментам

    Показатели DORA и другие показатели инженерной эффективности появляются в надстройках к существующим инструментам DevOps. А вот сторонний…

  • Вопросы и ответы на сертификационный экзамен Scrum master

    Готовы ли вы к сертификационному экзамену Scrum master? Проверьте себя, ответив на эти 10 сложных вопросов и ответов на экзамене Scrum master.

Облачные вычисления

  • Разверните приложение с малой задержкой с помощью AWS Local Zones за 5 шагов

    Как только вы решите, что локальные зоны AWS подходят для вашего приложения, пришло время для развертывания. Следуйте этому пошаговому видео…

  • HPE делает большие ставки на общедоступное облако для ИИ

    Компания HPE выходит на рынок общедоступных облачных сервисов с искусственным интеллектом, но готова ли она? Узнайте больше о предложениях ИИ для HPE GreenLake и …

  • Усовершенствование HPE GreenLake, нацеленное на все

    Брайан Томпсон из HPE рассказывает о том, как HPE GreenLake стала синонимом бренда, смотрит в будущее и о том, как …

Безопасность

  • CISA: вредоносное ПО Truebot заражает сети в США и Канаде

    CISA предупредила об атаках Truebot в совместном консультативном совещании с ФБР, Канадским центром кибербезопасности и Мультигосударственным …

  • JumpCloud аннулирует ключи API в ответ на продолжающийся инцидент

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

  • В июне произошел шквал атак программ-вымогателей на сектор образования.

    В конце учебного года атаки программ-вымогателей прокатились по школам и университетам K-12, вызвав срывы занятий и …

ПоискAWS

  • AWS Control Tower стремится упростить управление несколькими учетными записями

    Многие организации изо всех сил пытаются управлять своей огромной коллекцией учетных записей AWS, но Control Tower может помочь. Сервис автоматизирует …

  • Разбираем модель ценообразования Amazon EKS

    В модели ценообразования Amazon EKS есть несколько важных переменных. Покопайтесь в цифрах, чтобы убедиться, что вы развернули службу…

  • Сравните EKS и самоуправляемый Kubernetes на AWS Пользователи

    AWS сталкиваются с выбором при развертывании Kubernetes: запустить его самостоятельно на EC2 или позволить Amazon выполнить тяжелую работу с помощью EKS. См…

Простая загрузка файлов с помощью JavaScript

Загружайте что угодно и откуда угодно

Библиотека JavaScript , которая может загружать все, что вы в нее бросаете, оптимизирует изображения для более быстрой загрузки и предлагает великолепный, доступный, шелковисто-гладкий пользовательский интерфейс .

Адаптеры каркаса

Базовая библиотека написана на ванильном JavaScript и поэтому может использоваться везде.

Ниже вы можете найти список адаптеров, упрощающих использование FilePond с вашим любимым фреймворком.

  • Реагировать
  • Вью
  • Стройный
  • Угловой
  • jQuery

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

Примеры реализации

Давайте рассмотрим два быстрых примера реализации и посмотрим, на что способен FilePond.

Загрузка нескольких файлов

  • Демонстрация
  • Код
Многофайловая демонстрация
  • Добавьте атрибут Multiple к входному файлу, чтобы создать область размещения нескольких файлов.
  • Ограничьте максимальное количество файлов с помощью атрибута data-max-files .
  • Перетащите изображение, и FilePond выполнит быстрый предварительный просмотр. Это также исправит информацию об ориентации мобильной фотографии.
  • Файлы можно переупорядочивать, возьмите файл и перетащите его в новое место.
  • Редактирование изображений на платформе Pintura

Выбор изображения профиля

  • Демо
  • Код
Демонстрация изображения профиля
  • Перетащенные изображения будут автоматически обрезаны до соотношения сторон 1:1 и масштабированы, чтобы соответствовать ограничивающей рамке 200 × 200.
  • Если вы случайно перетащите изображение в окно браузера, FilePond предотвратит его открытие браузером.
  • Редактирование изображений на платформе Pintura
♥

Редактор изображений Pintura прекрасно интегрируется с FilePond и открывает перед пользователями идеальные возможности редактирования изображений.

  • Пятиминутная установка
  • Набор масок и направляющих
  • Определить параметры соотношения сторон
  • Поворот, изменение размера и отражение изображений
  • Аннотирование, украшение и редактирование изображений
  • Finetune Цвета изображения
  • Применение эффектов фильтра
Узнайте больше о Pintura

Обзор функций

  • Несколько форматов ввода

    Принимает каталоги, файлы, большие двоичные объекты, локальные URL-адреса, удаленные URL-адреса и URI данных.

  • Несколько источников файлов

    Удаление файлов, выбор файлов из файловой системы, добавление файлов с помощью API или копирование и вставка файлов.

  • Асинхронная или синхронная загрузка

    Отправляйте файлы на сервер с помощью XMLHttpRequest или сохраняйте и отправляйте с сообщением формы в формате base64 с помощью подключаемого модуля File Encode.

  • Оптимизация изображения

    Автоматическое изменение размера и обрезка изображений на клиенте экономит пропускную способность сервера и значительно увеличивает скорость загрузки.

  • Доступный

    Протестировано с программным обеспечением AT, таким как VoiceOver и JAWS. Навигация по пользовательскому интерфейсу FilePond осуществляется с помощью клавиатуры.

  • Отзывчивый

    Автоматически масштабируется до доступного места. Работает как на мобильных, так и на настольных устройствах.

Это еще не все…

  • Перетаскивание для изменения порядка файлов
  • Изменение меток и значков
  • Режим нескольких или одного файла
  • Фильтрация файлов из удаленных папок
  • Восстановить временные файлы сервера
  • Файлы перехвата упали на страницу
  • Загружать при сбросе или ждать действий пользователя
  • Ограничение высоты области сброса
  • Удалить для замены текущего файла
  • Копировать вставить файлы
  • Добавить метаданные в файлы
  • Расширение FilePond с помощью плагинов
  • Ограничение размера входного файла
  • Ограничить общий размер всех файлов
  • Ограничьте типы файлов, которые можно добавить
  • Показать предварительный просмотр файлов изображений
  • Обрезать изображения до фиксированного соотношения
  • Изменение размера изображений, чтобы они поместились в ограничительной рамке
  • Принудительное изменение размера изображений до определенного размера
  • Применить преобразования изображения на клиенте
  • Сжатие изображений JPEG
  • Преобразование изображений в JPEG или PNG
  • Чтение информации об ориентации изображения EXIF ​​
  • Файлы кодирования Base64

FilePond постоянно совершенствуется

Ознакомьтесь с приведенной ниже дорожной картой, чтобы узнать, что будет в ближайшее время.

Дорожная карта

Core

  • Представление в виде сетки
  • Загрузка фрагмента
  • Анимированные значки кнопок
  • Различные макеты предметов
  • Переменные CSS для цветов

Адаптеры

  • Угловые
  • Стройный
  • Вью
  • jQuery
  • Реагировать

Плагины

  • Редактор изображений
  • Вращение и отражение изображения
  • Водяные знаки изображения
  • Маскирование изображения

Будьте в курсе новых выпусков дорожной карты, подписавшись на информационный бюллетень

О компании PQINA

Под управлением Рика Шеннинка PQINA помогает более 10 000 компаний по всему миру для достижения успеха.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *