Labs: HTML5 Uploader
0601/12Script 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.
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;