Önizleme Resim sunucuma yüklensin

Merhaba nasıl görüntümü asp.net C# sunucumda yüklemeden önizleyebilirim ve görüntüyü gördüğümde sunucuya yüklemek için karşıya yüklemem gerekir.Önizleme Resim sunucuma yüklensin

kaynak

2011-01-12 Osama khodrog

http://codepedia.info/2015/06/html5-filereader-preview-image-show-thumbnail-image-before-uploading-on-server-in-jquery/ –

HTML5 özellikli bir tarayıcıda, kullanıcı hdd'sinden base64 kodlu bir dize olarak bir dosya okumak için FileReader nesnesini kullanabilirsiniz. Önizlemeyi göstermek için bu base64 gösterimini css ile kullanabilirsiniz. Daha eski tarayıcılarda, bunu yapmak için flash veya benzeri eklenti tabanlı kodlara ihtiyacınız olacaktır.

<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

kaynak

2011-01-12 19:45:00

yardımcı olacağını umuyorum Var okuyucuda hata = yeni FileReader(); IE 8 –

ie8'de html5 uyumlu değil. –

Evet bu mümkündür:

İşte tüm modern tarayıcılarda çalışır HTML5 örnektir.

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); 
     }  
    }

buradan Live Demo alabilirsiniz.

kaynak

2014-07-25 11:22:07

Önizleme Resim sunucuma yüklensin

cevap

İlgili konular