Hay varios enfoques para cargar un archivo sin usar el formulario en JavaScript:
Enfoque 1: este enfoque es usar FormData que puede cargar un archivo sin usar ningún tipo de formulario. Lo especial de esto es que los métodos de red, como fetch, pueden aceptar un objeto FormData como cuerpo. Está codificado y enviado con Content-Type — multipart/form-data.
Fragmento de JavaScript:
Javascript
var gfg = new FormData();
gfg.append('pictureFile',
pictureInput.files[0]);
// upload.php is the file to be uploaded
$.ajax({
url: 'upload.php',
type: 'POST',
processData: false,
contentType: false,
dataType: 'json',
data: gfg
});
Enfoque 2: este enfoque consiste en utilizar XMLHTTPRequest que puede cargar directamente el archivo como contenido dentro del cuerpo de la solicitud POST.
Fragmento de JavaScript:
Javascript
// JavaScript Code
var form = document.getElementById('the-form');
form.onsubmit = function () {
var formData = new FormData(form);
formData.append('file', file);
var xhr = new XMLHttpRequest();
// Add any event handlers here...
xhr.open('POST', form.getAttribute('action'), true);
xhr.send(formData);
// To avoid actual submission of the form
return false;
}
Enfoque 3: este enfoque es usar el complemento simpleUpload .
Fragmento de código HTML:
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GFG</h2> <input type="file" name="arquivo" id="simpleUpload" multiple> <button type="button" id="upload"> Upload </button> </body> </html>
Fragmento de JavaScript:
Javascript
$('#simpleUpload').simpleUpload({
// upload.php is the file
// to be uploaded
url: 'upload.php',
trigger: '#upload',
success: function (data) {
alert('Successfully Uploaded');
}
});
Producción:
Publicación traducida automáticamente
Artículo escrito por sankalpsharma424 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA