Borrar un registro de un array de input file multiple

navegantes · #1 (**permalink**) 08/01/2013, 12:40

Estoy realizando un formulario donde se pueden subir múltiples ficheros. Con algún que otro problemilla... pero funciona.

Ahora quiero poder decidir borrar algún fichero de los que he seleccionado pero que finalmente no quiero subir. Resulta que por mucho que lo borre del DOM no se borra del array del input file. (anda que yo también)

Buscando un poco me entero de que dicho array es de solo lectura... pero yo normalmente si que lo hago en otros muchos gestores de contenidos...

Así pues... ¿Cual es la forma entonces de actualizar dicho array si quiero borrar un fichero de los cuatro que previamente iba a subir?

marlanga · #2 (**permalink**) 08/01/2013, 18:08

Já, ese problema lo tuve yo cuando hice el uploader de javascript puro.
Por cada input file que creo dinámicamente, también creaba un array asociado a él con los índices de los elementos eliminados (futuros, si los hubiera).

Cuando finalmente le daba al botón de subir los ficheros, lo que hacía era recorrer cada input file, y dentro de cada input file recorrería su lista de "files". Si el índice de dicho file no está en la lista de eliminados para ese input file, entonces creaba un objeto ajax (xmlhttprquest) y enviaba el fichero al servidor (una petición ajax por cada fichero). Dicha petición dispara ciertos eventos que sirven para controlar el procentaje del fichero subido y la velocidad de subida.

Pero si tú no tienes pensado hacerlo con AJAX, lo único que se me ocurre (es posible que haya otra forma mejor) es que metas un input hidden en el formulario que se enviará y escribas en él (cada vez que el usuario diga que quiera borrar un fichero) cierta información que te sirva para que luego en el servidor, no almacenar los ficheros eliminados.
Como habrás adivinado, desgraciadamente todos los ficheros se enviarám, pero al menos en el server no guardarás los que no debas guardar.

emprear · #3 (**permalink**) 08/01/2013, 20:16

No lo probé a full subiendo los archivos, pero debería funcionar

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<style type="text/css">
/*<![CDATA[*/
 
span{
cursor: pointer;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
/* script */
function cantidad(){
var x=document.getElementsByName("archivos[]");
alert(x.length);
return false;
}
function borrar(elid){
document.getElementById(elid).setAttribute('name',null);
document.getElementById(elid).disabled = true;
}
function activar(elid){
document.getElementById(elid).setAttribute('name','archivos[]');
document.getElementById(elid).disabled = false;
}
 
//]]>
</script>
</head>
<body>
 
<form action="subir.php" method="post" enctype="multipart/form-data" onsubmit="return cantidad();">
<p>Archivo uno<br />
<input name="archivos[]" type="file" id="uno"/> <span onclick="borrar('uno')">borrar</span> | <span onclick="activar('uno')">habilitar</span>
</p>
<p>Archivo dos<br />
<input name="archivos[]" type="file" id="dos" /> <span onclick="borrar('dos')">borrar</span> | <span onclick="activar('dos')">habilitar</span>
</p>
<p>Archivo tres<br />
<input name="archivos[]" type="file" id="tres" /> <span onclick="borrar('tres')">borrar</span> | <span onclick="activar('tres')">habilitar</span>
</p>
<p>
<input type="submit" name="Submit" value="Subir" />
</p>
</form>
</body>
</html>

Y hacerle algunas mejoras con el borrar / habilitar. Si te fijás al hacer el submit el número de elementos del array se modifica. Es cuestión de probar

Saludos

marlanga · #4 (**permalink**) 09/01/2013, 03:53

Ese no funciona bien porque no se borran archivos individuales, que es lo lógico, si no todos los archivos elegidos por un input file.

emprear · #5 (**permalink**) 09/01/2013, 14:16

Lo probé en local y si funcionó

html

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<style type="text/css">
/*<![CDATA[*/
 
span{
cursor: pointer;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
/* script */
function cantidad(){
var x=document.getElementsByName("archivos[]");
alert(x.length);
return false;
}
function borrar(elid){
document.getElementById(elid).setAttribute('name',null);
document.getElementById(elid).disabled = true;
}
function activar(elid){
document.getElementById(elid).setAttribute('name','archivos[]');
document.getElementById(elid).disabled = false;
}
 
//]]>
</script>
</head>
<body>
 
<form action="subir_varios.php" method="post" enctype="multipart/form-data">
<p>Archivo uno<br />
<input name="archivos[]" type="file" id="uno"/> <span onclick="borrar('uno')">borrar</span> | <span onclick="activar('uno')">habilitar</span>
</p>
<p>Archivo dos<br />
<input name="archivos[]" type="file" id="dos" /> <span onclick="borrar('dos')">borrar</span> | <span onclick="activar('dos')">habilitar</span>
</p>
<p>Archivo tres<br />
<input name="archivos[]" type="file" id="tres" /> <span onclick="borrar('tres')">borrar</span> | <span onclick="activar('tres')">habilitar</span>
</p>
<p>
<input type="submit" name="procesar_subida" value="Subir" /> <input type="reset" value="restablecer" />
</p>
</form>
</body>
</html>

php

Código PHP:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>upload multiple php</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body{
font-size: 11pt;
font-family: verdana, sans-serif;
color: #252525;
}
/*]]>*/
</style>
</head>
<body>
<?php
if (isset($_POST['procesar_subida'])) {
    $campos_file = 0;
    $archivos_enviados = 0;
    $archivos_movidos = 0;
    $archivos_subidos = array();
    $directorio_destino = dirname(__file__) . '/subidos/'; //directorio de destino (0777)
    for($i = 0; $i < count($_FILES['archivos']['name']); $i++) {
        $campos_file++;      
        if ($_FILES['archivos']['name'][$i] != '') {
            $archivos_enviados++;
            $archivos_subidos[] = $_FILES['archivos']['name'][$i];
            if (move_uploaded_file($_FILES['archivos']['tmp_name'][$i], $directorio_destino . $_FILES['archivos']['name'][$i])) {
                $archivos_movidos++;
            }
        }
    }
    
    echo "\n<div>\n<p><b>Estadísticas:</b></p>\n";
    echo "Número de campos file es $campos_file.<br/>\n";
    echo "Número de archivos enviados por post es $archivos_enviados.<br/>\n";
    echo "Número de archivos movidos correctamente $archivos_movidos.<br/>\n";
    echo "Los nombres de archivo subidos son <br/>\n<b>" . implode('<br />', $archivos_subidos) . "</b>\n</div>\n";
}
?>
<p><a href="<?php echo $_SERVER['HTTP_REFERER']; ?>">Enviar otros</a></p>
</body>
</html>

El php es muy básico y no limita por extension, mimeType ó tamaño

No funcionaría si usamos el tributo multiple (@navegante no hace ninguna referencia al mismo) en nuestro input file, pero si, si lo hacemos a partir de varios campos file.

SAludos

marlanga · #6 (**permalink**) 09/01/2013, 16:47

Cuando leí lo de subida múltiple da archivos asumí que también quería poder seleccionar múltiples ficheros, porque en el casi de que el cliente quiera subir muchos archivos de una misma carpeta, elegirlos uno a uno es molesto; y como hizo referencia al array de files del objeto input, que efectívamente es de sólo lectura, pensé que tuvo el mismo problema que yo.

navegantes · #7 (**permalink**) 12/01/2013, 07:40

Cita:

Iniciado por marlanga

Cuando leí lo de subida múltiple da archivos asumí que también quería poder seleccionar múltiples ficheros, porque en el casi de que el cliente quiera subir muchos archivos de una misma carpeta, elegirlos uno a uno es molesto; y como hizo referencia al array de files del objeto input, que efectívamente es de sólo lectura, pensé que tuvo el mismo problema que yo.

Hola a todos, perdón por mi ausencia. Estuve con otra parte del código y ahora vuelvo a esta...

Pues efectivamente uso un input file multiple, por lo que por lo leido el ejemplo de @emprear no va a funcionar.

@emprear, mil perdones por hacerte perder el tiempo, fue culpa mia el no especificar un poco mejor las cosas.

La respuesta de @marlanga me la miraré con más detalle, aunque ya pone que los ficheros realmente se suben al servidor... bueno no se si ese sistema lo usan otros o no y como lo hacen disimuladamente no me entero, pero no me gustaría que se subieran archivos al servidor de más cuando no van a mantenerse.

He mirado algunas opciones completas como jQuery File Upload .
Son impresionantes y cumplen de sobras con lo que necesito, pero me resultan demasiado engorrosas para implementarlas. En realidad no necesito tanto.

Sin ir más lejos esta opción (jquery file upload) me da la posibilidad de subir cada fichero de forma independiente. Yo no quiero eso, pero no he sido capaz de descubrir la forma de quitar esos botones sin que todo se desmonte. Intenté tambien añadir en cada archivo un campo input text y un textarea, pero lo mismo no hubo manera... demasiado complejo (al menos para mi).

Por eso quiero mirar de hacerlo yo mismo, adaptar un poco las cosas, pero veo que esto es más problemático de lo que pensaba...

(no todo en esta vida tiene que ser fácil jeje)

Seguro que seguiré pidiendo socorro por aquí