¿Cómo cargar archivos de forma asíncrona usando jQuery?

Cargar archivos desde la máquina local al servidor se denomina carga de archivos. Funciona exactamente igual que la definición, cuando seleccionamos el archivo del navegador y hacemos clic en el botón Enviar, el navegador toma el archivo de la máquina local y lo envía al servidor y el servidor hace su trabajo para guardar el archivo en la ruta definida. Aquí use ajax y jQuery para cargar un archivo de forma asíncrona.

Función utilizada:

FormData(): Crea un nuevo objeto FormData.
FormData.append(): agrega un nuevo valor a una clave existente dentro de un objeto FormData, o agrega la clave si aún no existe.
move_uploaded_file(): Mueve un archivo cargado a una nueva ubicación.

Pasos para ejecutar el Programa:

Cree una carga de carpeta en el directorio xampp/htdocs.
Copie y edite el código html/jQuery según el requisito.
Cree un archivo upload.php y copie el código php que se proporciona a continuación.
Inicie el servidor Apache y abra el archivo html usando el navegador.
Seleccione cualquier archivo de texto o imagen y haga clic en el botón Cargar.
El archivo se cargará en la carpeta «cargar» en xamp/htdocs.
Si el archivo es una imagen, también se mostrará; si no es un archivo de imagen, se mostrará el mensaje «El archivo cargado no tiene una imagen».

Ejemplo:

subir.php

<?php
  
/* Getting file name */
$filename = $_FILES['file']['name'];
  
/* Location */
$location = "upload/".$filename;
$uploadOk = 1;
  
if($uploadOk == 0){
   echo 0;
}else{
   /* Upload file */
   if(move_uploaded_file($_FILES['file']['tmp_name'], $location)){
      echo $location;
   }else{
      echo 0;
   }
}
?>

Archivo HTML:

<!DOCTYPE html>
<html>
<head>
    <title>
        Async file upload with jQuery
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>
  
<body>
    <div align="center">
        <form method="post" action="" enctype="multipart/form-data"
                id="myform">
   
            <div >
                <input type="file" id="file" name="file" />
                <input type="button" class="button" value="Upload"
                        id="but_upload">
            </div>
        </form>
    </div>    
       
    <script type="text/javascript">
        $(document).ready(function() {
            $("#but_upload").click(function() {
                var fd = new FormData();
                var files = $('#file')[0].files[0];
                fd.append('file', files);
       
                $.ajax({
                    url: 'upload.php',
                    type: 'post',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function(response){
                        if(response != 0){
                           alert('file uploaded');
                        }
                        else{
                            alert('file not uploaded');
                        }
                    },
                });
            });
        });
    </script>
</body>
  
</html>

Producción:
cargar archivo de imagen

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por AnkitMishra16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta