Php Ajax загрузка файла, всегда появляется неопределенная ошибка индекса

Question

Отправка файла через ajax не работает. Я следовал за другими сообщениями, чтобы создать это, но кажется, что formdata не содержит файл, в результате я всегда получаю ошибку неопределенного индекса 'image'

<form  enctype: 'multipart/form-data'>
<div class="add_category">
<label style="font-size:20px;">Add categories</label>
<input type="text" name="category" id="category" placeholder="Enter Here" style="border-style:solid;height:30px;">
<label style="font-size:20px;">Choose image</label>
<input type="file" id="file" name="image" style="border-style:solid;height:25px;">
<button name="add_category" type="button" onclick="addcategory()" >ADD Category</button>
</br>
</br>
</div>
</form>


function addcategory(){
//var1=document.getElementById("category").value;
var formData = new FormData();

formData.append('image', $('input[id=file]')[0].files[0]); 


$.ajax({
       url : 'performcategoryserver.php',
       type : 'POST',
       enctype: 'multipart/form-data',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
             alert(data);
       }
});

}

performcategoryserver.php:

<?php
$imagename=$_FILES['image']['name'];
echo($imagename);
?>

Это всегда возвращает неопределенную ошибку индекса изображения, пожалуйста, помогите .

Answer 1

Ваш тег формы открылся неправильно, во-первых, вы можете это исправить и попробовать еще раз?

<form  enctype: 'multipart/form-data'>

Должно быть

<form method="post" enctype="multipart/form-data">

Answer 2

Наконец нашел рабочий код, изменил это:

    <form id="myform"  enctype= 'multipart/form-data'>

Изменено это:

function addcategory(){
var formData = new FormData( $("#myform")[0] );


var xhr = new XMLHttpRequest();

// Open connection
xhr.open('POST', 'performcategoryserver.php', true);

// Set up handler for when request finishes
xhr.onload = function () {
    if (xhr.status === 200) {
        //File(s) uploaded
        alert(xhr.responseText);
    } else {
        alert('An error occurred!');
    }
};

// Send data
xhr.send(formData);
}

Answer 3

Измените

<form  enctype: 'multipart/form-data'> 

на

<form id="myform"  enctype= 'multipart/form-data'>

Измените свою функцию на:

function addcategory(){
var formData = new FormData( $("#myform")[0] );


$.ajax({
       url : 'performcategoryserver.php',
       type : 'POST',
       data : formData,
       async : false,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       dataType:"json",
       success : function(data) {
             alert(data);
       }
});

}