Предварительный просмотр изображения перед сохранением

Question

Я использую Drag and Drop для загрузки изображений, но как я могу просмотреть свое изображение перед сохранением?

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