如何使用filereader爲每個文件輸入進行預覽

我想爲每個文件輸入進行預覽。我有三個這樣的文件上傳。我想預覽這個輸入'上傳預覽每個..我不知道如何使用這個。函數在DOM元素上。謝謝所有。如何使用filereader爲每個文件輸入進行預覽

<div class="app"> 
      <img id="uploadPreview" style="width: 100px; height: 100px;" /> 
      <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> 
</div> 

<div class="app"> 
      <img id="uploadPreview" style="width: 100px; height: 100px;" /> 
      <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> 
</div> 

<div class="app"> 
     <img id="uploadPreview" style="width: 100px; height: 100px;" /> 
     <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> 
</div> 

<script> 
function PreviewImage() { 
     var oFReader = new FileReader(); 
     oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 

     oFReader.onload = function (oFREvent) { 
      document.getElementById(this."uploadPreview").src = oFREvent.target.result; 
     }; 
    }; 
</script>

來源

2015-12-30 Maung Ye Htun Zaw

嘗試像這樣......... [上載之前的html javascript圖像預覽 - 代碼示例]（http://stackoverflow.com/questions/4459379/preview-an-image-before-它是上傳） –

是的，這是一個文件輸入上傳的預覽，我想知道如何預覽4個文件輸入與一個功能。 –

使用jQuery，請看一看樣品JS代碼：

function readURL(input, img_id) { 

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

     reader.onload = function (e) { 
      $('#'+img_id).attr('src', e.target.result); 
     } 

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

$(".img-up").change(function(){ 

    readURL(this, $(this).attr('data-id')); 
});

HTML

<form id="form1" runat="server"> 
    <input type='file' id="img1" class="img-up" data-id="img_view1" /> 
    <img id="img_view1" src="#" alt="your image" /> 

    <input type='file' id="img2" class="img-up" data-id="img_view2" /> 
    <img id="img_view2" src="#" alt="your image" /> 
</form>

輸入文件data-id和img標籤id必須相同。希望你會明白看到這個代碼。

來源

2015-12-30 05:17:41

我想獲得四個輸入文件。我已經爲此測試過了。這爲一個文件輸入工作。 Thk –

請檢查我更新的答案這將幫助你:) @MaungYeHtunZaw –

http://codepen.io/maungyehtunzaw/pen/LGbdEO你的代碼是在這裏，它不工作。查看我需要做什麼。我只是測試codepen向你展示。 –

Upload Preview jQuery Plugin

它是如何工作的？

要訪問未上傳的數據，我們可以使用HTML5文件閱讀器api。這個API提供讀取本地文件。這一步非常重要，因爲我們需要這些數據才能在瀏覽器窗口中顯示它。要獲得有關文件閱讀器的更多信息，您可以閱讀offical documentation.。

來源

2015-12-30 05:20:49

HTML：

<input type="file" class="" name="img" id="uploadImage" onchange="PreviewImage()" /> 
    <div class="image_uploaded" id="image_uploaded"> 
    </div>

的Javascript：

var counter = 0; 
    function PreviewImage() { 
     var oFReader = new FileReader(); 
     oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 
     oFReader.onload = function(oFREvent) { 
      var img = document.createElement("img"); 
      img.id = "uploadPreview" + counter; 
      img.src = oFREvent.target.result; 
      var src = document.getElementById("image_uploaded"); 
      src.appendChild(img); 

      counter++; 
     }; 
    };

我希望這會幫助別人。

來源

2017-05-11 06:58:54 Shokparbayev

如何使用filereader爲每個文件輸入進行預覽

回答

相關問題