uploader de imágenes multiple

kenny_match · #1 (**permalink**) 01/03/2012, 19:45

Hola, estoy tratando de hacer un uploader para sitio. Mi idea es usar un input tipo file multiple, luego cargo las imagenes en vista previa con una opcion de borrar las imágenes que no deseo subir, mi problema es que no logro eliminar los elementos que estan enlistados en el input tipo file y cuando ejecuto el scrip php sube tamien los que supuesta mente he eliminado.

como puedo eliminar elementos específicos del vector que almacena los archivos seleccionados por el browser.

Código PHP:

 
<html>  
<head> 
<title>Crear input file</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript"> 
<!-- 
num=0; 
var files; 
function crear(src,name,num) { 
  fi = document.getElementById('fiel'); 
  contenedor = document.createElement('div'); 
  contenedor.id = 'div'+num; 
  fi.appendChild(contenedor);  
   
  var newImage = document.createElement("img");  
  newImage.src = src; 
  newImage.width = 150; 
  newImage.height = 150; 
  contenedor.appendChild(newImage); 
   
  ele = document.createElement('textarea'); 
  ele.name = 'desc'+num; 
  contenedor.appendChild(ele); 
   
  ele = document.createElement('input'); 
  ele.type = 'button'; 
  ele.value = 'Borrar';  
  ele.name = 'div'+num; 
  ele.onclick = function () {borrar(this.name)} 
  contenedor.appendChild(ele);  
} 
function borrar(obj) { 
    num = obj.substring(3,4);     
    delete document.getElementById('files').files[num];     
    alert(document.getElementById('files').files[num].name) 
      fi = document.getElementById('fiel');  
      fi.removeChild(document.getElementById(obj)); 
} 
 
function handleFileSelect(evt) { 
    document.getElementById('fiel').innerHTML=""; 
    var num=0; 
    files = evt.target.files; // FileList object 
 
    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) { 
                 
      // Only process image files. 
      if (!f.type.match('image.*')) { 
        continue; 
      } 
 
      var reader = new FileReader(); 
      // Closure to capture the file information. 
       
      reader.onload = (function(theFile){ 
          return function(e){ 
              crear(e.target.result,theFile.name,num); 
              num++; 
              }; 
        })(f); 
 
      // Read in the image file as a data URL. 
      reader.readAsDataURL(f); 
    } 
  } 
 
-->  
function loading(){ 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
} 
</script> 
</head> 
<body onload="loading()"> 
 
<?php 
if(isset($_FILES['files'])){ 
    foreach($_FILES['files']['tmp_name'] as $key => $tmp_name){ 
            move_uploaded_file($tmp_name,"img/{$_FILES['files']['name'][$key]}"); 
    } 
} 
?> 
         
<style> 
  .thumb { 
    height: 75px; 
    border: 1px solid #000; 
    margin: 10px 5px 0 0; 
  } 
</style> 
<form action="" method="post" enctype="multipart/form-data"> 
<input type="file" id="files" name="files[]" multiple /> 
<hr> 
<fieldset id="fiel"> 
</fieldset> 
<input type="submit" value="subir" /> 
</form> 
</body> 
</html>