Subir múltiples archivos mediante Fine Uploader

En este tutorial vamos a ver cómo subir múltiples ficheros utilizando PHP. Para ello utilizaré Fine Uploader, una librería open source gratuita desarrollada en Javascript. Por si fuera poco, Fine Uploader no tiene dependencias y es muy sencilla de entender y de utilizar. Mostraremos una barra de progreso durante la subida de imágenes y mostraremos una previsualización de las mismas en una galería. Mola, ¿verdad?

Mediante esta librería, podremos definir un montón de opciones para validar los ficheros que se suban, hacer que el usuario puede detener la subida e incluso eliminar el fichero antes de subirlo, además de otras características más... En este tutorial utilizaré opciones muy básicas para que os resulte más sencillo ver cómo funciona la librería, no entraremos en profundidad. Por ejemplo, definiremos el fichero PHP que gestionará la subida y el id del drop area que utilizaremos para mostrar la previsualización.

HTML y Javascript necesario para utilizar FineUploader

Descarga la última versión de FineUploader e integrala especificando la ruta donde has alojado sus archivos. Lo que he hecho también es incluir la plantilla gallery la cual viene dentro de la librería, para ahorrar tiempo a la hora de representar las imágenes. Esta plantilla muestra una pequeña previsualización de cada archivo subido. Estas pequeñas imágenes estarán dentro del drop area que hemos especificado en el Javascript. También en dicho script, defino la ruta al fichero PHP que se encargará de gestionar toda la subida de ficheros al servidor.

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="vendor/fine-uploader/fine-uploader-gallery-min.css" rel="stylesheet">
	<script src="vendor/fine-uploader/fine-uploader-min.js"></script>		
	<?php require_once("vendor/fine-uploader/templates/gallery.html"); ?>
	<title>Multiple File Upload using FineUploader</title>
	<style>
	body {width:600px;font-family:calibri;}
	</style>
</head>
<body>
    <div id="file-drop-area"></div>
    <script>
        var multiFileUploader = new qq.FineUploader({
            element: document.getElementById("file-drop-area"),
            request: {
                endpoint: 'view/fine-uploader/endpoint.php'
            }
        });
    </script>
</body>
</html>

PHP que gestiona la subida de ficheros

El fichero endpoint.php recibirá las solicitudes de nuestro formulario de subida de ficheros. Para ello crearemos el objeto UploadHandler() con las propiedades con los valores por defecto. Comprobamos la extensión de los ficheros enviados para que no nos cuelen otros tipos de archivos que no sean imágenes.

<?php
// Include the upload handler class
require_once "handler.php";
$uploader = new UploadHandler();

// Specify the list of valid extensions, ex. array("jpeg", "xml", "bmp")
$uploader->allowedExtensions = array(); // all files types allowed by default

// Specify max file size in bytes.
$uploader->sizeLimit = null;

// Specify the input name set in the javascript.
$uploader->inputName = "qqfile"; // matches Fine Uploader's default inputName value by default

// If you want to use the chunking/resume feature, specify the folder to temporarily save parts.
$uploader->chunksFolder = "../../data/chunks";

$method = get_request_method();

function get_request_method() {
    global $HTTP_RAW_POST_DATA;

    if(isset($HTTP_RAW_POST_DATA)) {
    	parse_str($HTTP_RAW_POST_DATA, $_POST);
    }

    if (isset($_POST["_method"]) && $_POST["_method"] != null) {
        return $_POST["_method"];
    }

    return $_SERVER["REQUEST_METHOD"];
}

if ($method == "POST") {
    header("Content-Type: text/plain");

    // Assumes you have a chunking.success.endpoint set to point here with a query parameter of "done".
    // For example: /myserver/handlers/endpoint.php?done
    if (isset($_GET["done"])) {
        $result = $uploader->combineChunks("../../data");
    }
    // Handles upload requests
    else {
        // Call handleUpload() with the name of the folder, relative to PHP's getcwd()
        $result = $uploader->handleUpload("../../data");

        // To return a name used for uploaded file you can use the following line.
        $result["uploadName"] = $uploader->getUploadName();
    }

    echo json_encode($result);
}
// for delete file requests
else if ($method == "DELETE") {
    $result = $uploader->handleDelete("../../data");
    echo json_encode($result);
}
else {
    header("HTTP/1.0 405 Method Not Allowed");
}
?>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP