Problema: Ajax no está pasando mi objeto de archivo: mientras trato de desarrollar un formulario de imagen de perfil, me quedé atascado por este problema, al usar console.log, puedo ver el objeto de archivo, incluso en la acción "onChange" de jquery pero cuando los datos de formulario se pasan a través de la acción Jquery Post, en el lado Php solo puedo ver la acción y los datos de prueba. Alguien sabe por qué ? Contexto, estoy usando Wordpress
HTML
<form id="image_prodifle_changer" action="" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="previews" class="d-none avatar_update"> </form>jquery
$('.avatar-change a').click(function (){ $('.avatar_update').trigger('click'); }); $('.avatar_update').change(function (e){ var form = $('#image_prodifle_changer')[0]; var formData = new FormData(form); var $image = $('input[type=file]')[0].files[0]; formData.append('action', 'updateavatar'); formData.append('test', 'something'); formData.append('file', $image); $.ajax( { type: 'POST', url:'/wp-admin/admin-ajax.php', //dataType:'JSON', data : formData, contentType: false, processData: false, success:function (formData){ console.log(formData); } } ) });Su solicitud de Ajax debería ser así
$.ajax({ type: "POST", url: "/wp-admin/admin-ajax.php", data: data, dataType: "JSON", contentType: false, //Required cache: false, //Required processData: false, //Required beforeSend: function () { //Your functions before send AJAX Request }, success: function (feedback) { //Your functions after AJAX Request Success }, error: function (error) { console.log(error); }, });Y puede obtener todos los datos del formulario usando
var data = new FormData(document.getElementById("yourFromId")); //get element by form id