Estoy enviando un archivo por POST junto con el texto "nombre" usando este formulario:
<form enctype="multipart/form-data" action="https://site[DOT]net/upload" method="post"> <input id="name" type="text" /> <input id="data" type="file" /> <button type="submit" name="submit" /> </form>Me gustaría hacer exactamente lo mismo usando javascript. Además, no quiero ser redirigido. Quiero permanecer en la página html y solo mostrar una ventana emergente "Carga completa". ¿Cómo puedo hacer esto en javascript (sin jquery)?
EDITAR:
Probé este código pero el POST no funciona:
<script> function uploader { var formData = new FormData(); formData.append("name", "Smith"); formData.append("data", fileInputElement.files[0]); var request = new XMLHttpRequest(); request.open("POST", "https://site[DOT]net/upload"); request.send(formData); } </script> <form> <input id="name" type="text" /> <input id="data" type="file" /> <button type="submit" name="submit" /> <button onclick="uploader()">Click</button> </form>La carga del formulario completo con javascript, incluidos los archivos, se puede realizar mediante la API de FormData y XMLHttpRequest.
var form = document.getElementById('myForm'); // give the form an ID var xhr = new XMLHttpRequest(); // create XMLHttpRequest var data = new FormData(form); // create formData object xhr.onload = function() { console.log(this.responseText); // whatever the server returns } xhr.open("post", form.action); // open connection xhr.send(data); // send dataSi necesita admitir IE10 e inferior, se vuelve cada vez más complicado y, en algunos casos, requerirá la publicación a través de iFrames, etc.
En caso de que alguien quiera hacer esto con la nueva búsqueda en lugar de xhr, este es el equivalente. Ver también: ¿Cómo hago una PUBLICACIÓN con datos de formularios de varias partes usando fetch?
var form = document.getElementById('formid'); form.onsubmit = async (e) => { e.preventDefault(); const form = e.currentTarget; const url = form.action; try { const formData = new FormData(form); const response = await fetch(url, { method: 'POST', body: formData }); console.log(response); } catch (error) { console.error(error); } } <form id="formid" enctype="multipart/form-data" action="#" method="post"> <input id="name" type="text" /> <input id="data" type="file" /> <button type="submit" name="submit">Submint</button> </form>