jQuery: Загрузка нескольких изображений с предварительным просмотром и удалением с помощью jQuery-плагина Uppy

12/12/2021 03:06

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

Uppy - это элегантный модульный загрузчик файлов jаvascript, который легко интегрируется с любым приложением. Он быстрый, имеет понятный API и позволяет беспокоиться о более важных проблемах, чем создание загрузчика файлов.

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

Загрузка нескольких изображений с предварительным просмотром и удалением с помощью jQuery-плагина uppy

Выполните следующие три шага и загрузите несколько изображений с предварительным просмотром и удалением с помощью плагина jQuery:

1. Создайте файл HTML.

Прежде всего, нам нужно создать один HTML-файл и поместить в него приведенный ниже код.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Multiple Image Upload with Preview and Delete jQuery Plugin</title>
  </head>
  <body>
    <div id="drag-drop-area"></div>
  </body>
</html>

2. Подключите библиотеки jQuery из CDN.

Затем нам нужно подключить библиотеки CDN jquery в файл HTML для загрузки нескольких изображений с предварительным просмотром и удалением с помощью плагина jQuery.

<link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" rel="stylesheet">
<script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>

3. Полный исходный код

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Multiple Image Upload with Preview and Delete jQuery Plugin</title>
    <link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="drag-drop-area"></div>
 
    <script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
    <script>
      var uppy = Uppy.Core()
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'}) //вы можете поместить сюда URL загрузки, куда вы хотите загрузить изображения
 
      uppy.on('complete', (result) => {
        console.log('Загрузка завершена! Мы загрузили эти файлы:', result.successful)
      })
    </script>
  </body>
</html>

Правила проверки и дополнительные параметры

Загрузка нескольких изображений с помощью плагина Uppy jQuery с плагином предварительного просмотра в реальном времени обеспечивает некоторые важные правила проверки и дополнительные параметры:

Maxfilesize: null | number — максимальный размер файла в байтах для каждого отдельного файла
maxNumberOfFiles: null | number — общее количество файлов, которые можно выбрать
minNumberOfFiles: null | number — минимальное количество файлов, которые необходимо выбрать перед загрузкой
allowedFileTypes: null | array — Разрешенные типы файлов или расширения файлов .jpg: ['image/*', '.jpg', '.jpeg', '.png', '.gif']

Если вы хотите узнать больше об этом плагине, вы можете прочитать документацию здесь

Jquery

0 + 0 -

MakeCodes
0
580