jQuery Cargar archivo AJAX
Una configuración similar a un objeto define principalmente el AJAX con múltiples pares clave-valor. Estas claves y valores guían el lado del servidor y le permiten leer desde el servidor y enviar datos al servidor.
Con jQuery, podemos implementar fácilmente un ejemplo en el que podemos publicar datos o archivos en el servidor y ver si se cargó por completo.
En la siguiente sección, intentaremos cubrir una instancia que tomará valores de entrada del usuario y luego los publicará en el servidor. También examinaremos si los datos se están actualizando sin recargar la página.
También leeremos los datos actualizados o publicados. Saltemos al segmento de código para ver mejor las palabras.
Use AJAX y jQuery para cargar archivos e ingresar
Por lo general, al subir un archivo será más fácil visualizar la acción post. Entonces, en este caso, tendremos un campo de entrada de texto y un campo de entrada de archivo.
Después de una publicación exitosa en los campos, recibiremos un mensaje asertivo y los datos agregados.
Para esta tarea, tomaremos una parte HTML, una parte jQuery y, por último, un archivo PHP. Cada archivo tiene su especificación.
El HTML mostrará la interfaz de usuario, donde iniciaremos la tarea de carga. A continuación, el segmento jQuery tomará la referencia de los campos de entrada a través del id.
Además, se agregará AJAX aquí y conectaremos el archivo PHP en AJAX como URL. El archivo PHP tendrá la ruta del directorio donde se publicarán los datos y veremos los resultados en la salida.
Usaremos el software Apache a través del servidor XAMMP.
- Primero, debe instalar XAMMP e iniciar Apache.
- Además, deberá instalar PHP y agregar la ruta de PHP a las variables de entorno> ruta de la variable de sistemas.
- Vaya a la carpeta XAMMP y busque el directorio
htdocs. - En el directorio
htdocs, cree una carpeta donde se guardarán sus archivosindex.html,index.jsyupload.php. - Cree una carpeta llamada
imagenen esta nueva carpeta.
Fragmento de código:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload file</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="index.js"></script>
</head>
<body style="background-color: gray">
<div class="container" style="width:50%;margin:25%;background:white;border:2px solid white">
<div style="padding: 10px">
<form id="myform" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="Name"></label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
<div class="form-group">
<label for="Image"></label>
<input type="file" id="image" class="form-control" name="image" placeholder="Image">
</div>
<div class="form-group" style="height:10px"></div>
<div class="form-group">
<input type="submit" class="btn btn-primary" id="submit" name="submit" value="Send">
</div>
</form>
</div>
</div>
</body>
</html>
index.js:
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
var data = new FormData();
var form_data = $('#myform').serializeArray();
$.each(form_data, function(key, input) {
data.append(input.name, input.value);
});
var image = $('#image').val();
if (image != '') {
var file_data = $('input[name="image"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append('image[]', file_data[i]);
}
}
var request = $.ajax({
url: 'upload.php',
type: 'post',
processData: false,
contentType: false,
data: data,
});
request.done(function(response, textStatus, jqXHR) {
console.log('done!');
console.log(response);
});
request.fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
})
})
})
subir.php:
<?php
$dir = __DIR__.'/image/'.$_FILES["image"]["name"][0];
if(move_uploaded_file($_FILES["image"]["tmp_name"][0], $dir))
{
$data = array(
"Status" => "Done",
"path" => $dir,
"Name" => $_POST['name'],
"Image" => $_FILES["image"]["name"][0]
);
echo json_encode($data);
}
else
{
$data = array(
"Status" => "Failed",
"path" => $dir,
"Name" => $_POST['name'],
"Image" => $_FILES["image"]["name"][0]
);
echo json_encode($data);
}
?>
Producción:
Luego, después de todas esas instalaciones y preparación, configuramos los CDN de Bootstrap y jQuery en nuestro HTML y seguimos el código. Usamos el método $.each() para recorrer las entradas del formulario.
Y, por último, vaya a su navegador y escriba localhost/"folder_name(inside the htdocs)" y vea la interfaz de usuario similar al ejemplo. Y como se muestra en la demostración, intente lograr los detalles en la consola y verifique la carpeta imagen de la carpeta del proyecto, si los archivos se han cargado correctamente.
