Tengo este código ajax que publica datos en el lado del servidor pero se vuelve a cargar después de cargarlo correctamente. He adjuntado mi código html a continuación. amablemente ayuda aquí, gracias
function UploadVid(){ var file = $("#inputVideo")[0].files[0]; var formData = new FormData(); formData.append("file1", file); $.ajax({ url: 'http://localhost:3000/upload-video', method: 'POST', data: formData, contentType: false, processData: false, xhr: function () { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgressHandler, true ); xhr.addEventListener("load", loadHandler, false); xhr.addEventListener("error", errorHandler, false); xhr.addEventListener("abort", abortHandler, false); console.log(xhr) return xhr; } }); } //html code <div class="col-4 mt-2"> <label class="col-12">Upload Video File</label> <button onclick="$('#inputVideo').trigger('click')" class="btn btn-primary text-white">Upload</button> <input id="inputVideo" onchange="UploadVid(event)" accept="video/*" hidden class="d-none" type="file"> </div>Para solucionar esto y mejorar la calidad de su código, elimine el controlador de eventos en línea y adjunte el evento utilizando un método discreto al elemento de form que contiene el botón. Desde allí, puede llamar a preventDefault() en el evento pasado a su función de controlador como argumento para evitar la solicitud HTTP estándar causada por el envío del formulario.
Además, como sugirió @Christopher, agregue type="button" al botón para que no envíe el formulario cuando haga clic en él para seleccionar un archivo para cargar.
Prueba esto:
$('#yourForm').on('submit', e => { e.preventDefault(); var file = $("#inputVideo")[0].files[0]; var formData = new FormData(); formData.append("file1", file); $.ajax({ url: 'http://localhost:3000/upload-video', method: 'POST', data: formData, contentType: false, processData: false, xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgressHandler, true); xhr.addEventListener("load", loadHandler, false); xhr.addEventListener("error", errorHandler, false); xhr.addEventListener("abort", abortHandler, false); return xhr; } }); }); $('.upload-btn').on('click', () => { $('#inputVideo').trigger('click'); }); <div class="col-4 mt-2"> <label class="col-12">Upload Video File</label> <button type="button" class="btn btn-primary text-white">Upload</button> <input type="file" id="inputVideo" hidden class="ulpoad-btn d-none" /> </div>