Я относительно новичок в функциях jQuery и Ajax, но работал с формами Ajax за последние несколько дней. При попытке загрузки изображений у меня возникла проблема с загрузкой файлов. В поисках ресурсов я не мог найти ничего полезного, потому что они кажутся чрезмерно сложными с бессмысленными дополнениями или не имеют никакого объяснения, что не помогает мне учиться дальше.
Я написал этот код для обработки загрузки изображения в Ajax:
$(function() { $('.input_photo').on("change",function() { var formData = new FormData($('form.upload-form')); $.ajax({ url: "upload.php", type: "POST", data: formData, success: function (msg) { alert(msg) } }); }); }); Это отправляет запрос в файл upload.php , однако данные не отправляются, в основном моя форма буквально такова:
<form class="upload-form"> <input type="file" name="input_photo" class="input_photo" /> </form>
Кажется, что данные не передаются в заголовках, и я предполагаю, что я получаю доступ к нему через PHP с массивом $_POST['data'] или $_FILES ? Кто-то с лучшими знаниями, пожалуйста, помогите объяснить это, было бы здорово это понять дальше. Благодарю.
Это будет работать для одного или нескольких файлов.
$('input:file').on('change', function () { var data = new FormData(); //Append files infos jQuery.each($(this)[0].files, function(i, file) { data.append('file-'+i, file); }); $.ajax({ url: "my_path", type: "POST", data: data, cache: false, processData: false, contentType: false, context: this, success: function (msg) { alert(msg); } }); });
затем
$_FILES['file-0'] $_FILES['file-1'] [...]
Но будьте осторожны, что использование FormData не работает на IE до IE10
Вам необходимо установить processData и contentType в свой ajax-вызов (также добавленный идентификатор к вашему элементу input , чтобы получить содержимое файла).
HTML
<form class="upload-form"> <input type="file" id="photo" name="input_photo" class="input_photo" /> </form>
JS
$(function() { $('.input_photo').on("change",function() { var file = document.getElementById("photo").files[0]; //fetch file var formData = new FormData(); formData.append('file', file); //append file to formData object $.ajax({ url: "upload.php", type: "POST", data: formData, processData: false, //prevent jQuery from converting your FormData into a string contentType: false, //jQuery does not add a Content-Type header for you success: function (msg) { alert(msg) } }); }); });
Попробуйте следующее:
var formData = $('form.upload-form').serialize();