jQuery Ajax Загрузка Файлов

Question

Я могу использовать следующий код jQuery для загрузки файлов с помощью метода POST в AJAX-запросе?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

Если это возможно, нужно ли заполнять часть data? Я правильно это делаю? Я просто хочу отправить файл на сервер.

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

Answer 1

Вопрос: Как создать простую форму для загрузки файлов с использованием jQuery?

Ответ:

Вы можете создать простую форму для загрузки файлов, используя HTML и jQuery. Ниже представлен пример кода, который демонстрирует, как это сделать:

HTML Часть

<!-- Форма загрузки -->
<form>
  <table>
    <tr>
      <td colspan="2">Загрузка файла</td>
    </tr>
    <tr>
      <th>Выберите файл</th>
      <td><input id="csv" name="csv" type="file" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="Отправить"/> 
      </td>
    </tr>
  </table>
</form>

JavaScript Часть (jQuery)

<script>
   // Обработка отправки формы
   $("form").submit(function(evt){   
      evt.preventDefault(); // Предотвращаем стандартное поведение формы
      var formData = new FormData($(this)[0]); // Создаем объект FormData из формы

      $.ajax({
          url: 'fileUpload', // URL, куда будут отправлены данные
          type: 'POST', // Метод отправки
          data: formData, // Данные, которые отправляются
          async: false, // Синхронный запрос
          cache: false, // Отключаем кэширование
          contentType: false, // Указываем, что не нужно устанавливать заголовок Content-Type
          enctype: 'multipart/form-data', // Указываем тип кодирования
          processData: false, // Отключаем обработку данных
          success: function (response) { // Обработка успешного ответа
             alert(response); // Выводим ответ в виде алерта
          }
       });

       return false; // Возвращаем false, чтобы избежать стандартной отправки формы
    });
</script>

Объяснение:

Используется библиотека jQuery для обработки события отправки формы.
При отправке формы выполняется предотвращение стандартного поведения (перезагрузка страницы).
С помощью FormData создается объект, содержащий данные формы.
AJAX-запрос отправляется на сервер (по адресу 'fileUpload') с данными формы.
В настройках запроса указаны необходимые параметры, такие как отключение кэширования, установка типа кодирования и соответствующие настройки обработки данных.
В случае успешного ответа от сервера выводится алерт с сообщением.

Таким образом, вы сможете легко реализовать загрузку файлов на вашем сайте.

Answer 2

Я немного запоздал с этим вопросом, но искал решение для загрузки изображений на основе AJAX, и ответ, который мне нужен был, довольно разбросан по всему посту. В итоге я выбрал решение с использованием объекта FormData. Вот простой пример кода, который я собрал. Он демонстрирует, как добавить пользовательское поле в форму с помощью fd.append(), а также как обрабатывать данные ответа после завершения AJAX-запроса.

HTML для загрузки:

<!DOCTYPE html>
<html>
<head>
    <title>Форма загрузки изображения</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("событие отправки");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // указываем jQuery не обрабатывать данные
              contentType: false   // указываем jQuery не устанавливать contentType
            }).done(function(data) {
                console.log("Вывод PHP:");
                console.log(data);
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Выберите файл:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Загрузить" />
    </form>
    <div id="output"></div>
</body>
</html>

Если вы работаете с PHP, вот как можно обработать загрузку, используя оба пользовательских поля, показанных в вышеупомянутом HTML:

upload.php:

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Код возврата: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label . $_FILES["file"]["name"];
        echo "Загрузка: " . $_FILES["file"]["name"] . "<br>";
        echo "Тип: " . $_FILES["file"]["type"] . "<br>";
        echo "Размер: " . ($_FILES["file"]["size"] / 1024) . " кБ<br>";
        echo "Временный файл: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " уже существует. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $filename);
            echo "Сохранено в: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Неверный файл";
}
?>

Этот пример позволит вам загружать изображения с помощью AJAX и обрабатывать их на серверной стороне с помощью PHP. Не забудьте создать папку uploads и убедиться, что у нее есть разрешения на запись.

Answer 3

Вот перевод вашего фрагмента кода и объяснения на русский язык в стиле ответа на StackOverflow:

Используя чистый JavaScript, это проще

async function saveFile(inp) {
    let formData = new FormData();           
    formData.append("file", inp.files[0]);
    await fetch('/upload/somedata', {method: "POST", body: formData});    
    alert('успешно');
}

<input type="file" onchange="saveFile(this)">

На стороне сервера вы можете получить оригинальное имя файла (и другую информацию), которая автоматически включается в запрос.
Вам НЕ нужно устанавливать заголовок "Content-Type" в "multipart/form-data", браузер сделает это автоматически.
Это решение должно работать во всех основных браузерах.

Вот более развернутый фрагмент кода с обработкой ошибок, таймаутом и дополнительной передачей JSON:

async function saveFile(inp) {
    let user = { name: 'john', age: 34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    const ctrl = new AbortController(); // таймаут
    setTimeout(() => ctrl.abort(), 50000);

    try {
       let r = await fetch('/upload/image', 
         {method: "POST", body: formData, signal: ctrl.signal}); 
       console.log('HTTP код ответа:', r.status); 
       alert('успешно');
    } catch(e) {
       console.log('Хьюстон, у нас проблема...:', e);
    }
}

<input type="file" onchange="saveFile(this)">
<br><br>
Перед тем как выбрать файл, откройте консоль Chrome > вкладка "Сеть" для просмотра деталей запроса.
<br><br>
<small>Поскольку в этом примере мы отправляем запрос на https://stacksnippets.net/upload/image, код ответа, конечно, будет 404…</small>

Если у вас есть дополнительные вопросы, не стесняйтесь задавать их!

Answer 4

Вот как я это реализовал:

HTML

<input type="file" id="file">
<button id='process-file-button'>Обработать</button>

JS

$('#process-file-button').on('click', function (e) {
    let files = new FormData(), // вы можете рассматривать это как «мешок с данными»
        url = 'вашUrl';

    files.append('fileName', $('#file')[0].files[0]); // добавляем выбранный файл в мешок с именем 'file'

    $.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log(err);
        }
    });
});

PHP

if (isset($_FILES) && !empty($_FILES)) {
    $file = $_FILES['fileName'];
    $name = $file['name'];
    $path = $file['tmp_name'];

    // обрабатываем ваш файл
}

В данном примере используется AJAX для отправки выбранного файла на сервер, где он может быть обработан с помощью PHP. Убедитесь, что URL правильно настроен для обработки запроса.

Answer 5

Используйте FormData. Это работает очень хорошо 😃

Вот пример кода:

var jform = new FormData();
jform.append('user', $('#user').val());
jform.append('image', $('#image').get(0).files[0]); // Вот где важный момент

$.ajax({
    url: '/your-form-processing-page-url-here',
    type: 'POST',
    data: jform,
    dataType: 'json',
    mimeType: 'multipart/form-data', // это тоже
    contentType: false,
    cache: false,
    processData: false,
    success: function(data, status, jqXHR){
        alert('Ура! Всё в порядке.');
        console.log(data);
        console.log(status);
        console.log(jqXHR);
    },
    error: function(jqXHR, status, error){
        // Надеюсь, мы никогда не окажемся здесь
        console.log(jqXHR);
        console.log(status);
        console.log(error);
    }
});

Таким образом, через FormData вы можете удобно отправлять файлы и другие данные на сервер. Обратите внимание на параметры contentType: false и processData: false, которые необходимы для корректной передачи данных.

jQuery Ajax Загрузка Файлов

5 ответ(ов)

HTML Часть

JavaScript Часть (jQuery)

Объяснение:

Используя чистый JavaScript, это проще

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных