Foros del Web » Programando para Internet » Javascript »

uploader de imágenes multiple

Estas en el tema de uploader de imágenes multiple en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/03/2012, 19:45
 
Fecha de Ingreso: junio-2011
Ubicación: Trujillo - Peru
Mensajes: 4
Antigüedad: 13 años, 4 meses
Puntos: 0
uploader de imágenes multiple

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>

Etiquetas: php, upload-file
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 10:44.