Labs: HTML5 Uploader

0601/12

Script utilizando javascript: FormData(), FileReader() y acumulando los archivos para subir en un array desde el navegador. Además, un pequeño script php para subir el archivo al servidor.

Ver ejemplo online

HTML

<form method="post" enctype="multipart/form-data"  action="upload.php">
    <input type="file" name="imgs" id="imgs" multiple />
</form>
<div id="ajax"></div>
<div id="imagenes"></div>

JS

var formdata = new FormData();
document.getElementById("imgs").addEventListener("change", function (evt) {
    $("#ajax").html("Subiendo");
    var i = 0, len = this.files.length, img, reader, file;
    for ( ; i < len; i++ ) {
        file = this.files[i];
        if (!!file.type.match(/image.*/)) {
            if ( window.FileReader ) {
                reader = new FileReader();
                reader.onloadend = function (e) {
                    $('#imagenes').append('<img src="' +e.target.result+ '" />');
                };
                reader.readAsDataURL(file);
            }
            formdata.append("imgs[]", file);
        }
    }
    $.ajax({
        url: "upload.php",
        type: "POST",
        data: formdata,
        processData: false,
        contentType: false,
        success: function (res) {
            $("#ajax").html(res);
        }
    });
}, false);

PHP

$resultados = '';
$aPermitidos = array('image/jpeg','image/png','image/gif');
if(count($_FILES["imgs"])>0){
    foreach ($_FILES["imgs"]["error"] as $key => $fail) {
        if ($error == UPLOAD_ERR_OK) {
            if(in_array($_FILES["imgs"]["type"][$key],$aPermitidos)){
                $fichero = $_FILES["imgs"]["tmp_name"][$key];
                $lugar = "uploads/".$_FILES["imgs"]["name"][$key];
                if(move_uploaded_file($fichero, $lugar)){
                    $resultados .= 'Subido: '.$fichero.'<br />';
                }
            } else {
                $resultados .= 'Bazinga! No me seas pillín... ';
                break;
            }
        }
    }
} else {
    $resultados .= 'Bazinga! Error inesperado...';
}
echo $resultados;

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>