$ _Файл не отправляется при отправке в ajax

Question

Есть много вопросов по этому вопросу уже в stackexchange. Я пробовал все из них, но я просто не могу загрузить файл.

HTML

<form id="getjs">
        <input type="file" name="icon_next" id="icon_next">
</form>
<button type="submit" id="submit2" class="btn btn-primary">Submit</button>

Jquery

$(document).on('click', '#submit2', function(e) {
var icon_next = $('#icon_next')[0].files[0];
//have try FormData('#getjs')
//have try $('#icon_next').serialize();

console.log(icon_prev);// this give File { name: "filter_function - Copy.png", lastModified: 1557632103057, webkitRelativePath: "", size: 91746, type: "image/png" }

var c = $.ajax({
    type: 'POST',
    url: 'custom_setting/loadicon',
    data: {'file': icon_next}, 
    contentType: false,
    processData: false,
    success: function(response) { 
        //this always success
         }

    });
});

Функция custom_setting / loadicon

if (isset($_GET['file'])) {
            $k = 1;
            // Code for upload file
        } else {
            $k = 0;
        }

Моя проблема всегда получить $ k = 0;файл не был передан. Куда я пошел не так?

Answer 1

попробуйте с FormData для отправки всей формы

Например:

$(document).on('click', '#submit2', function(e) {
//var icon_next = $('#icon_next')[0].files[0];
var formdata=new FormData(document.getElementById('getjs'));
//have try $('#icon_next').serialize();

console.log(icon_prev);// this give File { name: "filter_function - Copy.png", lastModified: 1557632103057, webkitRelativePath: "", size: 91746, type: "image/png" }

var c = $.ajax({
    type: 'POST',
    url: 'custom_setting/loadicon',
    data: formdata, 
    contentType: false,
    processData: false,
    success: function(response) { 
        //this always success
         }

    });
});

и в php

 if(isset($_FILES['icon_next'])){
       $_FILES['icon_next']['name'];
       $k = 1;
        // Code for upload file
  } else {
            $k = 0;
   }

Answer 2

Пожалуйста, отредактируйте тег формы с атрибутом enctype, как показано ниже

<form id="getjs" enctype="multipart/form-data">
    <input type="file" name="icon_next" id="icon_next">
</form>

Функция custom_setting / loadicon

if (isset($_FILES['icon_next'])) {
    $k = 1;
    // Code for upload file
} else {
    $k = 0;
}

Answer 3

Попробуйте этот код

$(document).on('click', '#submit2', function(e) {
    let files = new FormData(), // you can consider this as 'data bag'
        url = 'custom_setting/loadicon';

    files.append('fileName', $('#icon_next')[0].files[0]); // append selected file to the bag named 'file'

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

custom_setting / loadicon

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


    // process your file

}