✅ Noticias, temas, complementos de WEB y WordPress. Aquí compartimos consejos y las mejores soluciones para sitios web.

Arrastrar y soltar carga de varios archivos usando JavaScript y PHP

472

En el pasado, escribí un artículo Arrastrar y soltar carga de archivos usando JavaScript y PHP. Algunos lectores pidieron escribir un artículo sobre cómo agregar un cargador de archivos que permite a los usuarios cargar varios archivos con las funciones de arrastrar y soltar.

Mientras trabaja en una aplicación web, es posible que deba cargar varios archivos con un solo cargador en su formulario. Puede ayudar a un usuario a cargar uno o varios archivos de una sola vez. No les gusta cargar varios archivos uno por uno. Dar una función de carga de archivos de este tipo agrega una mejor experiencia de usuario y también acelera su aplicación.

En este artículo, le muestro cómo agregar este cargador de archivos sin usar ningún complemento externo de arrastrar y soltar. Subiré los archivos usando Ajax. Significa que los archivos se cargarán en el servidor sin volver a cargar una página completa.

Empezando

Como dije, no usaremos ningún complemento externo para la función de arrastrar y soltar. Voy a escribir todo el código desde cero. Es mucho más fácil. No hay cosas complejas en él. Simplemente siga los pasos a continuación y listo.

Creemos un archivo index.htmly agreguemos el código a continuación.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Drag Drop Multiple File Upload</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
        <div id="drag_upload_file">
            <p>Drop file(s) here</p>
            <p>or</p>
            <p><input type="button" value="Select File(s)" onclick="file_explorer();"></p>
            <input type="file" id="selectfile" multiple>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="custom.js"></script>
</body>
</html>

Aquí lo incluí style.cssy custom.jsen el que agregaremos un código relacionado. Como tenemos la intención de usar Ajax, incluí una biblioteca jQuery.

Para proporcionar una interfaz de usuario básica para nuestro cargador de archivos, agreguemos algunas propiedades CSS. Por supuesto, puede agregar su propio CSS para darle un aspecto diferente al cargador de archivos.

style.css

#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;
}

Después de esto, debería ver su cargador de archivos como la siguiente captura de pantalla:

Arrastrar y soltar carga de varios archivos usando JavaScript y PHP

Arrastra y suelta varios archivos con JavaScript y PHP

Estás configurado con la interfaz de usuario básica. Ahora, podemos seguir adelante y escribir código real para JavaScript y PHP que cargan archivos en un servidor. En nuestro HTML agregué 2 métodos upload_file() y file_explorer () que reciben llamadas en archivos soltados y archivos seleccionados respectivamente.

Definamos estos métodos y pasemos los archivos al script del lado del servidor que carga los archivos en un servidor.

custom.js

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

Finalmente, escriba un código del lado del servidor para cargar el ajax.phparchivo en el archivo.

ajax.php

<?php
foreach($_FILES['file']['name'] as $key=>$val){
    $file_name = $_FILES['file']['name'][$key];
 
    // get file extension
    $ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
 
    // get filename without extension
    $filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);
 
    if (!file_exists(getcwd(). '/uploads')) {
        mkdir(getcwd(). '/uploads', 0777);
    }
 
    $filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;
    move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '/uploads/'.$filename_to_store);
}
echo "File(s) uploaded successfully";
die;

Este código crea un directorio de ‘cargas’ en su servidor y almacena todos los archivos dentro de este directorio. Mientras almacenamos archivos en un servidor, nos encargamos de mantener el nombre único de cada archivo cargado usando la función PHP uniqid().

Se trata de cargar varios archivos mediante la función de arrastrar y soltar. Espero que lo conozcas. Me gustaría escuchar sus pensamientos y sugerencias en la sección de comentarios a continuación.

Artículos relacionados

Fuente de grabación: artisansweb.net

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More