保存前的預覽圖像

我正在使用拖放來上傳圖像，但如何在保存前預覽圖像？保存前的預覽圖像

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，但我不知道如何實現

來源

2016-06-13 BrianCas

http://jsfiddle.net/hardiksondagar/t6UP5/ – Vineet

@Vineet這必須是一個答案部分 – brk

[上傳前預覽圖像]可能重複（http：// stackoverflow .com/questions/4459379/preview-an-image-before-it-is-uploaded） –

請嘗試

<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

來源

2016-07-29 07:27:34 Vineet

保存前的預覽圖像

回答

相關問題