Quiero enviar formData a mi archivo php en la función de cambio de entrada. Pero no puedo hacer que funcione, tal vez estoy pensando mal, ¿alguien podría ayudarme?
El formulario HTML
<form id="image1submit" action="website_refimage1_upload.php" method="post" enctype="multipart/form-data"> <div class="image-upload"> <label for="uploadImage1"> <img class="user-image width100" src="<?php echo $image?>"/> </label> <input class="file-input" id="uploadImage1" type="file" accept="image/*" name="image1" /> </div> </form>El JQuery
$("#uploadImage1").on('change',(function(e) { const form = $('#image1submit').get(0); const formData = new FormData(form); //e.preventDefault(); $('#image1submit').submit(); //var file = $(this).val(); $.ajax({ url: "website_refimage1_upload.php", type: "POST", data: formData, contentType: false, cache: false, processData:false, beforeSend : function() { //$("#preview").fadeOut(); //$("#err").fadeOut(); }, success: function(data) { if(data=='invalid') { // invalid file format. //$("#err").html("Invalid File !").fadeIn(); } else { // view uploaded file. //$("#preview").html(data).fadeIn(); $("#form")[0].reset(); } }, error: function(e) { //$("#err").html(e).fadeIn(); } }); }));Me da el siguiente error que también trató de arreglar pero lamentablemente no pudo hacer que funcionara.
TypeError no detectado: no se pudo construir 'FormData': el parámetro 1 no es del tipo 'HTMLFormElement'.
El error le dice que el valor pasado a new FormData() no es un elemento <form> . En lugar de pasar this , seleccione su elemento de formulario y páselo al constructor.
const form = $('#image1submit').get(0); const formData = new FormData(form);Prueba esto
$("#uploadImage1").on('change',(function(e) { $('#image1submit').submit(); }); $('#image1submit').on('submit',function(event){ event.preventDefault(); $.ajax({ url: "website_refimage1_upload.php", type: "POST", data: new FormData(this), contentType: false, cache: false, processData:false, beforeSend : function() { }, success:function(data) { } }); });No entiendo por qué haces una publicación de formulario normal Y la vuelves a publicar con ajax.
¿Podría intentar eliminar este fragmento de código: $('#image1submit').submit();
El resto de tu código parece estar bien.
También probé su código con algunos cambios y registros de la consola, y para mí todo funciona:
$("#uploadImage1").on("change", function (e) { const form = $("#image1submit").get(0); const formData = new FormData(form); //e.preventDefault(); console.log(...formData); //$("#image1submit").submit(); //var file = $(this).val(); $.ajax({ url: "http://google.com", type: "POST", data: formData, contentType: false, cache: false, processData: false, beforeSend: function () { //$("#preview").fadeOut(); //$("#err").fadeOut(); }, success: function (data) { if (data == "invalid") { // invalid file format. //$("#err").html("Invalid File !").fadeIn(); } else { // view uploaded file. //$("#preview").html(data).fadeIn(); $("#form")[0].reset(); } }, error: function (e) { //$("#err").html(e).fadeIn(); console.log('error:',e); } }); });