как отправить картинку в php файл при помощи ajax?

Question

я хочу передать изображение при помощи ajax в php файл под названием changeData.php

после выполнения данного кода вылезает ошибка

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

$('.photoInput').on('change', function () {
    $.ajax({
        url: "changeData.php",
        method: "POST",
        data: {photo: new FormData(this)}
    }).done(function(){
        console.log(123)
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="column">Photo</div>
  <div class="column">
    <label for="photoInput">Add photo</label>
  </div>
  <div class="column photoPreview">
    <input name="photo" type="file" class="photoInput" id="photoInput" placeholder="add photo" style="display:none">
  </div>
</div>

Answer 1

Конструктор FormData() принимает html форму, а не input. https://developer.mozilla.org/ru/docs/Web/API/FormData/FormData

Answer 2

Если открыть документацию, то там будет список методов, которые есть у объекта (напр. https://developer.mozilla.org/ru/docs/Web/API/FormData). Нужно лишь найти необходимый тебе метод и посмотреть описание конкретного метода с примерами кода (напр. https://developer.mozilla.org/ru/docs/Web/API/FormData/append).

Теперь по теме. Если тебе нужно сделать это именно через FormData, то реализовать это можно следующим образом.

<input type="file" name="file" id="image" onchange="uploadFile(this)" />

<script type="text/javascript">
    
    function uploadFile(file) {

        const formData = new FormData()
        formData.append("file", file.files[0])

        const xhr = new XMLHttpRequest

        xhr.open('POST', 'load.php', false)
        
        xhr.onreadystatechange = () => {
            console.log(xhr.responseText)
        }

        xhr.send(formData)
    }

</script>

И далее в PHP уже работать с нужным тебе файлом.

<?php


if(!empty($_FILES)) {
    if(move_uploaded_file($_FILES['file']['tmp_name'], realpath(__DIR__) . DIRECTORY_SEPARATOR . basename($_FILES['file']['name']))) {
        echo "Файл успешно загружен";
    }else{
        echo "Что-то пошло не так";
    }
}

БЛОГ НА HUSL

как отправить картинку в php файл при помощи ajax?

Ответы (2 шт):