이미지를 선택하는 동안 이미지를 표시하는 방법

Question

자바 스크립트 코드를 사용하고 있습니다.이 코드는 업로드하기 전에 선택한 이미지를 보여줍니다. 이미지는 이미지 dispaly:none;보다 및 쇼 이미지보다 이미지 선택하면 선택하지 않을 경우

자바 스크립트

<script> 
function readURL(input) { 

if (input.files && input.files[0]) { 
    var reader = new FileReader(); 

    reader.onload = function (e) { 

     $('#blah').attr('src', e.target.result); 
    } 

    reader.readAsDataURL(input.files[0]); 
    } 
    } 

     $("#imgInp").change(function(){ 
     readURL(this); 
    }); 
</script> 

HTML을

<form id="imageform" method="post" enctype="multipart/form-data" > 
     <input type="file" name="photoimg" id="imgInp" > 
     <img id="blah" src="#" alt="your image" /> 
     <input type="submit" Value="Upload"> 
     </form> 

코드가 작동이 조각은 perfectly.SO 내가 normaly 필요합니다. 나는이 문제를 클라이언트 쪽 스크립팅으로 처리하고 싶다.

Answer 1

이미지는 기본적으로 숨겨져 있도록 마크 업을 수정

<img id="blah" src="#" alt="your image" style="display:none" /> 

을 그리고 때 이미지에 jQuery를 show 메소드를 호출 다음과 같이 파일을 읽었습니다 :

$('#blah').attr('src', e.target.result); 
$('#blah').show(); 

피들입니다. here

Answer 2

시도

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('#blah').prop('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

jQuery(function() { 
    $("#imgInp").change(function() { 
     readURL(this); 
    }); 
}) 

데모 : Fiddle