저장하기 전에 미리보기

Question

끌어서 놓기를 사용하여 이미지를 업로드하고 있지만 저장하기 전에 이미지를 미리 볼 수 있습니까?

var obj = $('.drop'); 
obj.on('drop', function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    $(this).css('border',"2px dotted #bdc3c7"); 
    var files = e.originalEvent.dataTransfer.files; 
    var file = files[0]; 
}); 

나는 주변을 두리번 약 FileReader을 발견하지만 난

Answer 1

시도하십시오 구현하는 방법을 몰라 봤는데

<form id="form1" runat="server"> 
    <input type='file' id="imgInp" /> 
    <br> 
    <img id="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" /> 
</form> 

그리고 당신의 JS 부분 :

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

나는 그것이 도움이되기를 바랍니다. // 유래 :이 fiddle