Arrastrar y soltar carga de archivos usando JavaScript y PHP

¿Está buscando integrar la función de carga de archivos de arrastrar y soltar en su sitio web? Esta función es fácil de usar y reduce los clics de los usuarios. En este artículo, estudiamos cómo agregar funcionalidad para la carga de archivos de arrastrar y soltar usando JavaScript y PHP. También tendrá entrada de archivo para buscar un archivo.

La interfaz de usuario de carga de archivos final se verá como la imagen a continuación.

¿Por qué necesita la función de carga de archivos de arrastrar y soltar?

Siempre queremos tener una mejor experiencia de usuario en el sitio web. Dar la función de arrastrar y soltar para cargar archivos es una opción fácil de usar para sus usuarios. Muchos sitios web populares como Facebook, WordPress ya usan esta función.

Esta función se ve mejor en comparación con la forma tradicional de carga de archivos. También mejora la experiencia del usuario, ya que el usuario simplemente arrastra el archivo y lo carga en un servidor.

En este tutorial, daremos ambas opciones a los usuarios. Uno puede cargar el archivo usando arrastrar y soltar o mediante la entrada del archivo.

Voy a usar Ajax para cargar archivos en el lado del servidor. Al usar Ajax, su página no se cargará. Simplemente envía el archivo al servidor en segundo plano.

Integrar el cargador de archivos de arrastrar y soltar

Para comenzar, primero escribamos el código HTML. El siguiente código HTML tendrá un contenedor para la carga de archivos. También incluye un archivo CSS y JS que crearé en los siguientes pasos.

<link rel="stylesheet" href="style.css">
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
    <div id="drag_upload_file">
        <p>Drop file here</p>
        <p>or</p>
        <p><input type="button" value="Select File" onclick="file_explorer();"></p>
        <input type="file" id="selectfile">
    </div>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="custom.js"></script>

En el HTML anterior, utilicé los 2 eventos: ondrop y onclick. Definiré sus métodos en el custom.jsarchivo. Antes de eso, agreguemos el código CSS en el style.cssarchivo.

#drop_file_zone {
    background-color: #EEE;
    border: #999 5px dashed;
    width: 290px;
    height: 200px;
    padding: 8px;
    font-size: 18px;
}
#drag_upload_file {
  width:50%;
  margin:0 auto;
}
#drag_upload_file p {
  text-align: center;
}
#drag_upload_file #selectfile {
  display: none;
}

Nuestro objetivo es que cuando un usuario suelta o navega por un archivo, el archivo debe cargarse en el servidor. Para esto, necesita escribir código JavaScript que toma un archivo del lado del cliente y lo envía al servidor.

Para manejar este flujo, agregue el siguiente código en el custom.jsarchivo.

var fileobj;
function upload_file(e) {
    e.preventDefault();
    fileobj = e.dataTransfer.files[0];
    ajax_file_upload(fileobj);
}
 
function file_explorer() {
    document.getElementById('selectfile').click();
    document.getElementById('selectfile').onchange = function() {
        fileobj = document.getElementById('selectfile').files[0];
        ajax_file_upload(fileobj);
    };
}
 
function ajax_file_upload(file_obj) {
    if(file_obj != undefined) {
        var form_data = new FormData();                  
        form_data.append('file', file_obj);
        $.ajax({
            type: 'POST',
            url: 'ajax.php',
            contentType: false,
            processData: false,
            data: form_data,
            success:function(response) {
                alert(response);
                $('#selectfile').val('');
            }
        });
    }
}

El código JavaScript escrito anteriormente detecta automáticamente las opciones elegidas por el usuario para cargar un archivo. Finalmente, la función ajax_file_upload()toma el objeto de archivo y lo pasa al archivo Ajax.

Cargar archivo en el servidor

En el archivo Ajax, escribiré el código real que carga el archivo en el servidor. Cree un archivo llamado ajax.phpy agregue el siguiente código en él.

<?php
$arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];
 
if (!(in_array($_FILES['file']['type'], $arr_file_types))) {
    echo "false";
    return;
}
 
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
 
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. time(). '_'. $_FILES['file']['name']);
 
echo "File uploaded successfully.";

Este código PHP comprueba primero si la carpeta llamada ‘uploads’ existe en un servidor. De lo contrario, crea un directorio de ‘cargas’ y mueve el archivo dentro de él. Puede ajustar esta ruta de directorio según sus necesidades.

Espero que comprenda cómo agregar carga de archivos de arrastrar y soltar usando PHP y JavaScript. Déjame saber tus pensamientos y sugerencias en el comentario a continuación.

Artículos relacionados

• Arrastrar y soltar carga de varios archivos usando JavaScript y PHP
• Carga de archivos Ajax con PHP y jQuery
  – TinyPNG Comprimir imágenes usando PHP