プレビュー画像なし私のサーバにアップロード

こんにちは私はどのように私はasp.net C＃で自分のサーバーにアップロードせずに画像をプレビューすることができます私は画像を参照してください私はアップロードするサーバーにアップロードする必要があります。プレビュー画像なし私のサーバにアップロード

出典

2011-01-12 Osama khodrog

これは役に立ちます。http://codepedia.info/2015/06/html5-filereader-preview-image-show-thumbnail-image-before-uploading-on-server-in-jquery/ –

HTML5対応ブラウザでは、FileReaderオブジェクトを使用して、ユーザーhddのファイルをbase64でエンコードされた文字列として読み取ることができます。このbase64表現をCSSで使用すると、プレビューを表示できます。古いブラウザでは、フラッシュやそれに類するプラグインベースのコードが必要になります。ここで

は、すべての最新ブラウザで動作するHTML5の例である：

<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

出典

2011-01-12 19:45:00

私はvar reader = new FileReader（）;でエラーが発生しました。 IE 8 –

ie8ではhtml5に準拠していません。 –

はい、それは可能です。

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

ここから Live Demoを得ることができます。

出典

2014-07-25 11:22:07

プレビュー画像なし私のサーバにアップロード

答えて

関連する問題