Tema: ¿Cómo previsualizar una imagen antes de cargarla en el servidor?
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 03/08/2011, 08:33
rafm25
 
Fecha de Ingreso: agosto-2011
Mensajes: 4
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: ¿Cómo previsualizar una imagen antes de cargarla en el servidor?
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 original
  1. function handleFileSelect(evt) {
  2.   var files = evt.target.files; // FileList object
  3.   // Loop through the FileList and render image files as thumbnails.
  4.   for (var i = 0, f; f = files[i]; i++) {
  5.     // Only process image files.
  6.     if (!f.type.match('image.*')) {
  7.       continue;
  8.     }
  9.     var reader = new FileReader();
  10.     // Closure to capture the file information.
  11.     reader.onload = (function(theFile) {
  12.       return function(e) {
  13.         // Render thumbnail.
  14.         var span = document.createElement('span');
  15.         span.innerHTML = ['<img class="thumb" src="', e.target.result,
  16.                           '" title="', theFile.name, '"/>'].join('');
  17.         document.getElementById('list').insertBefore(span, null);
  18.         document.lin.src=e.target.result;
  19.       };
  20.     })(f);
  21.     // Read in the image file as a data URL.
  22.     reader.readAsDataURL(f);
  23.   }
  24. }
  25. document.getElementById('vida').addEventListener('change', handleFileSelect, false);

borrarprevisualizar.js código:

Código Javascript: 
Ver original
  1. function limpiar(){    
  2.     document.getElementById('vida').value="";
  3.     var direccion = "images/formatos/previsualizar.jpg";
  4.     document.lin.src=direccion;
  5.     return true;
  6. }

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

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script language="JavaScript" type="text/javascript" src="jscripts/imagenesborrar.js"></script>
  7. <style>
  8.    .thumb {
  9.      height: 100px;
  10.      border: 1px solid #000;
  11.      margin: 10px 5px 0 0;
  12.    }
  13.  </style>
  14. </head>
  15.  
  16. <body>
  17. <input type="file" id="vida" name="archivo" /><input type="button" value="Limpiar" onclick="return limpiar()" />
  18. <script src="jscripts/imagenes.js"></script>
  19. <img src="images/formatos/previsualizar.jpg" name="lin" align="middle" class="thumb" id="list">
  20. </body>
  21. </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">