如何用jQuery預覽選定的圖片？

這是我的實際代碼，它採用lorempicsum設計目的：

$('#multiple-files').on('change', function() { 
    console.log(this.files); // I get all my files properly. 

    for (var i = 0; i < this.files.length; i++) { 
     var image_path = 'http://lorempicsum.com/futurama/460/460/' + (i+1); 
     $('#files').append('<img src="'+ image_path +'" class="img-rounded img-responsive">') 
    } 
});

這是我的表格：

<form method="POST" action="http://localhost:8000/upload" accept-charset="UTF-8" id="upload-image" enctype="multipart/form-data"> 
    <div id="browse" class="btn btn-primary btn-lg btn-block"> 
     <span class="glyphicon glyphicon-picture"></span> Select pictures 
    </div> 

    <input multiple="multiple" id="multiple-files" accept="image/*" name="file[]" type="file"> 

    <div id="files"> 

    </div> 

    <div style="display: none;" class="row" id="form-buttons"> 
     <div class="col-xs-6"> 
      <input class="btn btn-warning btn-lg btn-block" id="reset" value="Reset" type="reset"> 
     </div> 
     <div class="col-xs-6"> 
      <input class="btn btn-success btn-lg btn-block" value="Upload" type="submit"> 
     </div> 
    </div> 
</form>

在此先感謝。

編輯

下面是截圖：http://i.imgur.com/8Dy4ZAp.png

來源

2014-04-20 user3551444

請提供HTML也 –

我已經編輯我的問題。 – user3551444

您不能使用虛假路徑名，因此無法直接包含圖像，必須使用fileReader，轉換爲base64，然後使用它。 – adeneo

只是想迭代，並轉換爲Base64，然後將圖像標記

$('#multiple-files').on('change', function (e) { 
    $.each(e.target.files, function(_, file) { 
     var reader = new FileReader(); 

     reader.onload = function (ev) { 
      var img = $('<img />', {src : ev.target.result}); 
      $('#files').append(img); 
     } 

     reader.readAsDataURL(file); 
    }); 
});

FIDDLE

來源

2014-04-20 14:48:25 adeneo

謝謝！有用！棒極了。 – user3551444

使用文件閱讀器

你可以在這裏漂亮的答案Preview an image before it is uploaded

使用下面的代碼

<body> 
<form id="form1" runat="server"> 
    <input type='file' id="imgInp" /> 
    <img id="blah" src="#" alt="your image" /> 
</form> 

<script type='text/javascript'> 
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> 
</body>

嘗試小提琴http://jsfiddle.net/LvsYc/

來源

2014-04-20 14:10:28

如何將這個腳本與我的結合？我需要爲文件[]中的每個文件添加帶有正確DataURL的img元素。 – user3551444

你的意思是你想添加多個圖像？ –

對於文件[]中的每個圖片都是，我需要在我的#files div內附加一個img元素。 – user3551444

如何用jQuery預覽選定的圖片？

回答

相關問題