Как передать выбранный файл в php-скрипт с помощью jQuery?

Question

Следующая форма, что я использую:

<form id="form-attachment" action="" method="post" enctype="multipart/form-data"> 
    <input name="attachment" type="file" /> 
    <input type="submit" /> 
</form> 

Это то, что я делаю с JQuery:

$('body').on('submit', '#form-attachment', function(e) { 

    e.preventDefault(); 
    var data = $(this).serialize(); 

    console.log('fine', data); 

    var url = 'imageupload.php'; 

    $.ajax({ 
     type : "POST", 
     url : url, 
     data : data, 

     success : function(response) { 
      console.log('success: ' + response); 
     }, 
     complete : function(response) { 
      console.log('complete: ', response); 
     }, 
     error: function(response) { 
      console.log('error: ', response); 
     } 
    }); 
}); 

И это мой imageupload.php файл:

$response = array(); 
$response["c"] = isset($_FILES["attachment"]); 

echo json_encode($response); 

И это результат на консоли на submit():

успех: { "с" ложь}

Итак, что случилось? Почему мой файл не отображается вообще?

Answer 1

Используйте FormData объект.

Вот пример того, как отправить файл по запросу JQuery Ajax:

$(document).on('change', 'input[type=file]', function() { 
    formData = new FormData; 
    formData.append('file', $(this)[0].files[0]); 
    $.ajax { 
    url: '/upload-url', 
    data: formData, 
    type: 'post', 
    processData: false, 
    contentType: false, 
    success: function(data) { 
     console.log(data); 
    } 
    } 
}); 

В вашем случае вы должны сначала сериализовать форму, добавьте в последовательную форму данные в объект FormData. Затем получите файл (или файлы) из поля файла и добавьте его в тот же объект formData. И, наконец, отправьте объект formData через ajax.

Answer 2

Вы можете использовать FormData объект, как показано ниже ..

$('body').on('submit', '#form-attachment', function(e) { 
var data = new FormData(jQuery('#form-attachment')[0]); 
jQuery.ajax({ 
    type: "post", 
    contentType: false, 
    processData: false, 
    url: jQuery(this).attr('action'), 
    dataType: "json", 
    data: data, 
    success: function (r) { 
    // Success Handeling 
    } 
    }); 
}); 

Примечание: - Нет необходимости добавлять что-либо, как говорит другой ответ. Этот метод должен передавать все поля ввода так же, как в обычной форме http POST.