¿Cómo previsualizar una imagen antes de cargarla en el servidor?

rafm25 · #1 (**permalink**) 02/08/2011, 22:24

Bueno.

Estoy haciendo una página web autogestionable (PHP) y necesito crear una sección, dentro de un formulario donde la persona cargue su imagen con un input, pero antes de darle al botón donde envíe la imagen al servidor y lo registre en la base de datos la vea de antemano y desida si es esa la que quiere subir.

GRACIAS...

rafm25 · #2 (**permalink**) 03/08/2011, 08:33

Bueno.

Como nadie me supo contestar la interrogante no me quedé con la mano cruzadas y lo resolví:

1.- Realizamos dos documentos javascript: "previsualizar.js" y "borrarprevisualizar.js"

previsualizar.js código:

Código Javascript:

Ver originalfunction handleFileSelect(evt) {
  var 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) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,
                          '" title="', theFile.name, '"/>'].join('');
        document.getElementById('list').insertBefore(span, null);
        document.lin.src=e.target.result;
      };
    })(f);
    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}
document.getElementById('vida').addEventListener('change', handleFileSelect, false);

borrarprevisualizar.js código:

Código Javascript:

Ver originalfunction limpiar(){    
    document.getElementById('vida').value="";
    var direccion = "images/formatos/previsualizar.jpg";
    document.lin.src=direccion;
    return true;
}

2.- Luego hacemos el documentos que vamos a trabajar: "index.php"

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript" src="jscripts/imagenesborrar.js"></script>
<style>
   .thumb {
     height: 100px;
     border: 1px solid #000;
     margin: 10px 5px 0 0;
   }
 </style>
</head>
 
<body>
<input type="file" id="vida" name="archivo" /><input type="button" value="Limpiar" onclick="return limpiar()" />
<script src="jscripts/imagenes.js"></script>
<img src="images/formatos/previsualizar.jpg" name="lin" align="middle" class="thumb" id="list">
</body>
</html>

Listo. GRACIAS...

PD: Lo más importante es donde está: <img src="images/formatos/previsualizar.jpg" name="lin" align="middle" class="thumb" id="list">

slide22 · #3 (**permalink**) 24/11/2012, 09:31

Hola, lo he probado pero no me funciona. El caso es que hay una parte del código que no entiendo. En index.php , en la linea 18 pones:

<script src="jscripts/imagenes.js"></script>

cual es ese imagenes.js? porque no lo mencionas anteriormente