Ver Mensaje Individual
  #5 (permalink)  
Antiguo 19/06/2014, 10:50
Avatar de zerokull
zerokull
 
Fecha de Ingreso: noviembre-2009
Mensajes: 153
Antigüedad: 15 años
Puntos: 1
Respuesta: quitar un elemento file multiple

Este es mi codigo

Código HTML:
Ver original
  1. <ul id="lista-archivos"></ul>
  2.             <input type="file" name="file_upload[]" id="file_upload" multiple />
  3.             <div id="response"></div>
Código Javascript:
Ver original
  1. var input = document.getElementById('file_upload'), formdata = false,
  2. btn = document.getElementById('btn_guarda'),envia = false, btnCancela = document.getElementById('btnCancela');
  3.     function mostrarImagenSubida(evt){
  4.         var archivos = evt.target.files;
  5.         var salida = "";
  6.         for (var i = 0, f; f = archivos[i]; i++) {         
  7.             salida +='<li data-elem="'+i+'"><label>nombre:</label><p>'+decodeURI(f.name)+'</p>';
  8.             salida +='<a href="javascript:void(0);" onclick="abortRead('+i+')"><img src="<?php echo $rutaPublica.'imagenes/uploadify-cancel.png'?>"/></a>';
  9.             salida +='</li>';
  10.            
  11.         }
  12.        
  13.         document.getElementById('lista-archivos').innerHTML = salida;              
  14.     }
  15.     function abortRead(idElmento) {    
  16.         var salida = "";
  17.         var len = input.files.length;
  18.         for(var i = 0 ; i < len; i++){
  19.             if(idElmento == i){
  20.                 $('#lista-archivos li:eq('+i+')').remove();
  21.                 var file = input.files[i];
  22.                 file.remove(file.idElmento);
  23.             }
  24.         }
  25.        
  26.     }
  27.     input.addEventListener('change', mostrarImagenSubida, false);
  28.     //Revisamos si el navegador soporta el objeto FormData
  29.     if(window.FormData){
  30.         formdata = new FormData();
  31.         //document.getElementById('btnSubmit').style.display = 'none';
  32.     }
  33.    
  34.   //Aplicamos la subida de imágenes al evento change del input file
  35.     btn.addEventListener("click", function (evt) {
  36.         var variables = "tipo = "+ $("#tipo").val()+"&tipoNombre="+$("#tipo option:selected").html()+"&cadena="+getSelections()+"&nota="+decodeURIComponent(textTinymce());
  37.         //input.addEventListener('change', function(evt){
  38.              var i = 0, len = input.files.length, img, reader, file;
  39.              document.getElementById('response').innerHTML = 'Subiendo...';
  40.             //Si hay varias imágenes, las obtenemos una a una
  41.              for( ; i < len; i++){
  42.                  file = input.files[i];              
  43.                 //Una pequeña validación para subir archivos
  44.                 var extencion = file.name.split('.').pop().toLowerCase();
  45.                 var permitido = ['doc','docx','xls','xlsx','ppt','pptx','zip','rar','pdf'];
  46.                
  47.                 if(permitido.indexOf(extencion) === -1) {                  
  48.                     $.messager.alert('ERROR','Archivo no aceptado. Por favor seleccione un archivo, permitido (word, excel, power point, zip, rar o pdf)','error');
  49.                     envia = false;
  50.                  }else{                      
  51.                     //Si el navegador soporta el objeto FileReader
  52.                      if(window.FileReader){
  53.                          reader = new FileReader();
  54.                         //Llamamos a este evento cuando la lectura del archivo es completa
  55.                          //Después agregamos la imagen en una lista
  56.                          /*reader.onloadend = function(e){
  57.                              mostrarImagenSubida(e.target.result);
  58.                          };*/
  59.                          //Comienza a leer el archivo
  60.                          //Cuando termina el evento onloadend es llamado
  61.                          reader.readAsDataURL(file);
  62.                      }
  63.                     //Si existe una instancia de FormData
  64.                      if(formdata){
  65.                          envia = true;
  66.                          //Usamos el método append, cuyos parámetros son:
  67.                              //name : El nombre del campo
  68.                              //value: El valor del campo (puede ser de tipo Blob, File e incluso string)
  69.                          formdata.append('file_upload[]', file);
  70.                          formdata.append('campos',variables);
  71.                      }
  72.                      
  73.                      
  74.                 }//valida extencion              
  75.              }//for
  76.              //Por último hacemos uso del método proporcionado por jQuery para hacer la petición ajax
  77.              //Como datos a enviar, el objeto FormData que contiene la información de los archivos
  78.              if(envia){
  79.                  if(formdata){
  80.                      $.ajax({
  81.                          url : '<?php echo $this->url(array('controller'=>'Circulares','action'=>'adjuntaarchivo'))?>',
  82.                          type : 'POST',
  83.                          data : formdata,
  84.                          processData : false,
  85.                          contentType : false,
  86.                          success : function(res){
  87.                              document.getElementById('response').innerHTML = res;
  88.                          }                
  89.                       });
  90.                  }
  91.              }
  92.                      
  93.         //});//eventos onchanged
  94.     }, false);//subida