Imagen de previsualización sin subir a mi servidor

Hola, cómo puedo obtener una vista previa de la imagen sin cargarla en mi servidor en asp.net C# y cuando veo la imagen, debo presionar subir para subir al servidor.Imagen de previsualización sin subir a mi servidor

Fuente

2011-01-12 Osama khodrog

espero que esto sea útil http://codepedia.info/2015/06/html5-filereader-preview-image-show-thumbnail-image-before-uploading-on-server-in-jquery/ –

En un navegador compatible con HTML5, puede usar el objeto FileReader para leer un archivo del hdd de los usuarios como una cadena codificada en base64. Puede usar esta representación de base64 con css para mostrar la vista previa. En navegadores más antiguos, necesitará un flash o un código similar basado en un plugin para hacerlo.

Aquí está un ejemplo de HTML5 que funciona en todos los navegadores modernos:

<html> 
<head> 
<script> 

var elmFileUpload = document.getElementById('file-upload'); 

function onFileUploadChange(e) { 
    var file = e.target.files[0]; 
    var fr = new FileReader(); 
    fr.onload = onFileReaderLoad; 
    fr.readAsDataURL(file); 
} 

function onFileReaderLoad(e) { 
    var bgStyle = "url('" +e.target.result + "')"; 

    elmFileUpload.parentElement.style.background = bgStyle; 

}; 

elmFileUpload.addEventListener('change',onFileUploadChange,false); 
</script> 
</head> 
<body> 
<input type="file" id="file-upload"/> 
</body> 
</html>

See a fiddle of it in action here

Fuente

2011-01-12 19:45:00

tengo un Error en var reader = new FileReader(); en IE 8 –

ie8 no es compatible con html5. –

Sí, es posible.

HTML

<input type="file" accept="image/*" onchange="showMyImage(this)" /> 
<br/> 
<img id="thumbnil" style="width:20%; margin-top:10px;" src="" alt="image"/>

function showMyImage(fileInput) { 
     var files = fileInput.files; 
     for (var i = 0; i < files.length; i++) {   
      var file = files[i]; 
      var imageType = /image.*/;  
      if (!file.type.match(imageType)) { 
       continue; 
      }   
      var img=document.getElementById("thumbnil");    
      img.file = file;  
      var reader = new FileReader(); 
      reader.onload = (function(aImg) { 
       return function(e) { 
        aImg.src = e.target.result; 
       }; 
      })(img); 
      reader.readAsDataURL(file); 
     }  
    }

Puede obtener Live Demo desde aquí.

Fuente

2014-07-25 11:22:07

Imagen de previsualización sin subir a mi servidor

Respuesta

Cuestiones relacionadas