Как загружать файлы асинхронно с помощью jQuery: 12 полезных примеров кода

Введение

Веб-разработка требует от нас умения работать с файлами. Загрузка файлов на сервер является обычной задачей, и в этой статье мы рассмотрим, как использовать jQuery для загрузки файлов асинхронно. Мы представим вам 12 полезных примеров кода, которые помогут вам освоить эту тему. Давайте начнем!

1. Загрузка файла на сервер

Для начала давайте рассмотрим простой пример загрузки файла на сервер с использованием jQuery. Мы будем использовать метод $.ajax() для отправки POST-запроса на сервер:

$.ajax({
  url: 'upload.php',
  type: 'POST',
  data: new FormData($('#fileForm')[0]),
  processData: false,
  contentType: false,
  success: function(response) {
    console.log(response);
  }
});

2. Отслеживание прогресса загрузки

Часто нам нужно отслеживать прогресс загрузки файла. Для этого мы можем использовать объект XMLHttpRequest и событие progress:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    var percent = (e.loaded / e.total) * 100;
    console.log(percent + '% загружено');
  }
};

xhr.send(new FormData($('#fileForm')[0]));

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

Иногда нам нужно загружать несколько файлов одновременно. Для этого мы можем использовать метод $.ajax() и объект FormData:

var files = $('#fileInput')[0].files;
var formData = new FormData();

for (var i = 0; i < files.length; i++) {
  formData.append('files[]', files[i]);
}

$.ajax({
  url: 'upload.php',
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: function(response) {
    console.log(response);
  }
});

4. Ограничение типов файлов

Иногда мы хотим ограничить типы файлов, которые пользователь может загружать на сервер. Для этого мы можем использовать атрибут accept в элементе <input>:

<input type="file" id="fileInput" accept=".jpg,.png,.gif">

5. Ограничение размера файла

Также мы можем ограничить размер файла, который пользователь может загрузить на сервер. Для этого мы можем проверить размер файла перед отправкой запроса:

var file = $('#fileInput')[0].files[0];
var maxSize = 5 * 1024 * 1024; // 5MB

if (file.size > maxSize) {
  console.log('Файл слишком большой');
} else {
  // Отправка запроса на сервер
}

6. Загрузка файла по URL

Иногда мы хотим загрузить файл по его URL-адресу. Для этого мы можем использовать метод $.ajax() и установить dataType в 'binary':

$.ajax({
  url: 'http://example.com/file.jpg',
  type: 'GET',
  dataType: 'binary',
  responseType: 'arraybuffer',
  success: function(response) {
    // Обработка загруженного файла
  }
});

7. Отмена загрузки файла

Иногда нам нужно отменить загрузку файла по ходу выполнения. Для этого мы можем использовать объект XMLHttpRequest и метод abort():

var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);

$('#cancelButton').click(function() {
  xhr.abort();
});

8. Добавление заголовков

Иногда нам нужно добавить заголовки к запросу. Для этого мы можем использовать метод setRequestHeader() объекта XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

xhr.send(new FormData($('#fileForm')[0]));

9. Обработка ошибок

Иногда мы можем столкнуться с ошибками при загрузке файлов. Для обработки ошибок мы можем использовать событие error объекта XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);

xhr.onerror = function() {
  console.log('Произошла ошибка загрузки файла');
};

xhr.send(new FormData($('#fileForm')[0]));

10. Отображение превью загруженного изображения

При загрузке изображения на сервер мы можем отобразить его превью на странице. Для этого мы можем использовать объект FileReader:

var file = $('#fileInput')[0].files[0];
var reader = new FileReader();

reader.onload = function(e) {
  $('#preview').attr('src', e.target.result);
};

reader.readAsDataURL(file);

11. Загрузка файла с прогрессом в виде полосы загрузки

Мы также можем отобразить прогресс загрузки файла в виде полосы загрузки. Для этого мы можем использовать библиотеку progressbar.js:

var bar = new ProgressBar.Line('#progressBar', {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'}
});

var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    var percent = (e.loaded / e.total) * 100;
    bar.set(percent / 100);
  }
};

xhr.send(new FormData($('#fileForm')[0]));

12. Сохранение загруженного файла на сервере

И, наконец, мы можем сохранить загруженный файл на сервере. Для этого мы можем использовать серверный скрипт, например, на PHP:

$targetDir = 'uploads/';
$targetFile = $targetDir . basename($_FILES['file']['name']);

if (move_uploaded_file($_FILES['file']['tmp_name'], $targetFile)) {
  echo 'Файл успешно загружен';
} else {
  echo 'Ошибка загрузки файла';
}

Заключение

В этой статье мы рассмотрели 12 полезных примеров кода, которые помогут вам загружать файлы асинхронно с помощью jQuery. Надеюсь, эти примеры помогут вам в вашей веб-разработке. Удачи!