quitar un elemento file multiple

[zerokull]

Hola buenos dias a todos. Espero me puedan ayudar.

Estoy desarrollando un mini sistema para subir archivos con HTML5. (reader = new FileReader(); , formdata)

La seleccion de archivos la estoy haciendo bien, es decir tengo un input file multiple

Código HTML:

<ul id="lista-archivos"></ul>
            <input type="file" name="file_upload[]" id="file_upload" multiple /> 
            <div id="response"></div>
 

y al seleccionar losarchivos, me muestra la lista de los archivos en el ul, y a esa lista le puse una imagen de un tache para poder borrar cualquier archivo. El problema viene ahí, no se como poder borrar los achivos.

Alguien me podría dar algunas pistas?

[Alexis88]

¿Cómo muestras las imágenes? Se me ocurre que podrías ocultar la imagen en cuestión con el atributo CSS display.

Saludos

[zerokull]

Eso ya lo intente y si lo quita bien, el problema es cuando paso los valores por PHP me trae todos los archivos seleccionados. es decir si selecciono 3 y oculto cualquiera por por css, me sigue trayendo tres

[Alexis88]

Ah ya, entiendo. En tal caso, muéstranos el código con el que los cargas y muestras, de él podríamos deducir la solución

[zerokull]

Este es mi codigo

Código HTML:

<ul id="lista-archivos"></ul>
            <input type="file" name="file_upload[]" id="file_upload" multiple /> 
            <div id="response"></div>
 

Código Javascript:

var input = document.getElementById('file_upload'), formdata = false, 
btn = document.getElementById('btn_guarda'),envia = false, btnCancela = document.getElementById('btnCancela');
    function mostrarImagenSubida(evt){
        var archivos = evt.target.files;
        var salida = "";
        for (var i = 0, f; f = archivos[i]; i++) {          
            salida +='<li data-elem="'+i+'"><label>nombre:</label><p>'+decodeURI(f.name)+'</p>';
            salida +='<a href="javascript:void(0);" onclick="abortRead('+i+')"><img src="<?php echo $rutaPublica.'imagenes/uploadify-cancel.png'?>"/></a>';
            salida +='</li>';
            
        }
        
        document.getElementById('lista-archivos').innerHTML = salida;              
    }
    function abortRead(idElmento) {     
        var salida = "";
        var len = input.files.length;
        for(var i = 0 ; i < len; i++){
            if(idElmento == i){
                $('#lista-archivos li:eq('+i+')').remove();
                var file = input.files[i];
                file.remove(file.idElmento);
            }
        }
        
    }
    input.addEventListener('change', mostrarImagenSubida, false);
    //Revisamos si el navegador soporta el objeto FormData
    if(window.FormData){
        formdata = new FormData();
        //document.getElementById('btnSubmit').style.display = 'none';
    }
    
  //Aplicamos la subida de imágenes al evento change del input file
    btn.addEventListener("click", function (evt) {
        var variables = "tipo = "+ $("#tipo").val()+"&tipoNombre="+$("#tipo option:selected").html()+"&cadena="+getSelections()+"&nota="+decodeURIComponent(textTinymce());
        //input.addEventListener('change', function(evt){
             var i = 0, len = input.files.length, img, reader, file;
             document.getElementById('response').innerHTML = 'Subiendo...';
            //Si hay varias imágenes, las obtenemos una a una
             for( ; i < len; i++){
                 file = input.files[i];              
                //Una pequeña validación para subir archivos
                var extencion = file.name.split('.').pop().toLowerCase();
                var permitido = ['doc','docx','xls','xlsx','ppt','pptx','zip','rar','pdf'];
                
                if(permitido.indexOf(extencion) === -1) {                   
                    $.messager.alert('ERROR','Archivo no aceptado. Por favor seleccione un archivo, permitido (word, excel, power point, zip, rar o pdf)','error');
                    envia = false;
                 }else{                      
                    //Si el navegador soporta el objeto FileReader
                     if(window.FileReader){
                         reader = new FileReader();
                        //Llamamos a este evento cuando la lectura del archivo es completa
                         //Después agregamos la imagen en una lista
                         /*reader.onloadend = function(e){
                             mostrarImagenSubida(e.target.result);
                         };*/
                         //Comienza a leer el archivo
                         //Cuando termina el evento onloadend es llamado
                         reader.readAsDataURL(file);
                     }
                    //Si existe una instancia de FormData
                     if(formdata){
                         envia = true;
                         //Usamos el método append, cuyos parámetros son:
                             //name : El nombre del campo
                             //value: El valor del campo (puede ser de tipo Blob, File e incluso string)
                         formdata.append('file_upload[]', file);
                         formdata.append('campos',variables);
                     }
                     
                     
                }//valida extencion              
             }//for
             //Por último hacemos uso del método proporcionado por jQuery para hacer la petición ajax
             //Como datos a enviar, el objeto FormData que contiene la información de los archivos
             if(envia){
                 if(formdata){
                     $.ajax({
                         url : '<?php echo $this->url(array('controller'=>'Circulares','action'=>'adjuntaarchivo'))?>',
                         type : 'POST',
                         data : formdata,
                         processData : false, 
                         contentType : false, 
                         success : function(res){
                             document.getElementById('response').innerHTML = res;
                         }                
                      });
                 }
             }
                     
        //});//eventos onchanged
    }, false);//subida
 

[Alexis88]

Estuve leyendo en otro foro [1][2] que no es posible quitar elementos de un FileList que es lo que tienes, además, el método remove es solo para eliminar opciones de una lista desplegable.

Si la idea es que el usuario elimine un archivo que seleccionó por error de entre la lista de archivos seleccionados, lo mejor sería que vuelva a seleccionarlos.

Saludos

[zerokull]

Y como borro o limpio los acrchivos seleccionados?
Y por otro lado como lo hacen los plugin ejemplo uploadify?

[Alexis88]

Para lo primero, puedes darle un valor null al <input type = "file" />, así borras a los elementos seleccionados. Para lo segundo, tendrías que consultar la documentación de ese plugin para saber cómo trabaja.

Saludos