Foros del Web » Programando para Internet » PHP »

Subida multiple de archivos con progress bar

Estas en el tema de Subida multiple de archivos con progress bar en el foro de PHP en Foros del Web. Hola a todos. Me he dascargado este código para subir imágenes por PHP usando la propiedad progress de HTML5. El código funciona de P... M... ...
  #1 (permalink)  
Antiguo 23/06/2017, 04:29
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 893
Antigüedad: 15 años, 8 meses
Puntos: 32
Subida multiple de archivos con progress bar

Hola a todos.

Me he dascargado este código para subir imágenes por PHP usando la propiedad progress de HTML5. El código funciona de P... M... pero solo es de uno en uno. Quiero modificarlo para que sea multiple, pero no me sale. ¿Alguna ayuda?


upload_form.html

Código PHP:
<html>
<
head>
<
script>
/* Script written by Miguel Nunez @ minuvasoft10.com */
function _(el){
    return 
document.getElementById(el);
}
function 
uploadFile(){
    var 
file _("file1").files[0];
    
//alert(file.name+" | "+file.size+" | "+file.type);
    
var formdata = new FormData();
    
formdata.append("file1"file);
    var 
ajax = new XMLHttpRequest();
    
ajax.upload.addEventListener("progress"progressHandlerfalse);
    
ajax.addEventListener("load"completeHandlerfalse);
    
ajax.addEventListener("error"errorHandlerfalse);
    
ajax.addEventListener("abort"abortHandlerfalse);
    
ajax.open("POST""upload4.php");
    
ajax.send(formdata);
}
function 
progressHandler(event){
    
_("loaded_n_total").innerHTML "Uploaded "+event.loaded+" bytes of "+event.total;
    var 
percent = (event.loaded event.total) * 100;
    
_("progressBar").value Math.round(percent);
    
_("status").innerHTML Math.round(percent)+"% uploaded... please wait";
}
function 
completeHandler(event){
    
_("status").innerHTML event.target.responseText;
    
_("progressBar").value 0;
}
function 
errorHandler(event){
    
_("status").innerHTML "Upload Failed";
}
function 
abortHandler(event){
    
_("status").innerHTML "Upload Aborted";
}
</script>
</head>
<body>
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1"><br>
  <input type="button" value="Upload File" onclick="uploadFile()">
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
</form>
</body>
</html> 
upload5.php
Código PHP:
<?php
$fileName 
$_FILES["file1"]["name"]; // The file name
$fileTmpLoc $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType $_FILES["file1"]["type"]; // The type of file it is
$fileSize $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    
echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(
move_uploaded_file($fileTmpLoc"upload/$fileName")){
    echo 
"$fileName upload is complete";
} else {
    echo 
"move_uploaded_file function failed";
}
?>
__________________
Somos una serie de acontecimiento que puede venir al caso en un momento dado.
  #2 (permalink)  
Antiguo 24/06/2017, 10:52
Avatar de manuparquegiralda  
Fecha de Ingreso: junio-2012
Ubicación: Barcelona
Mensajes: 241
Antigüedad: 10 años
Puntos: 39
Respuesta: Subida multiple de archivos con progress bar

1- En el input[type=file] pones el atributo múlltiple.
2- En la variable file de uploadFile quitas el index del array y ahí tendrás un array con todas las imágenes.
3- Haces un bucle para incluirlas todas en el formData
4- Las recibes en el PHP.
__________________
Diseño Web - Arisman Web
  #3 (permalink)  
Antiguo 25/06/2017, 13:26
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 893
Antigüedad: 15 años, 8 meses
Puntos: 32
Respuesta: Subida multiple de archivos con progress bar

Ok y para recoger el tamaño de los archivos, para pasarselo al progress bar ???

Muchas gracias.
__________________
Somos una serie de acontecimiento que puede venir al caso en un momento dado.

Etiquetas: bar, html, progress, subida
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:48.