Javascript 如何使用filereader对每个文件输入进行预览

我想对每个文件输入进行预览。我有三个像这样的文件上传。我想预览每个…的此输入“上载预览”。。我不知道怎么用这个。DOM元素上的函数。谢谢大家

<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>

---

请使用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

必须相同。希望您能理解此代码。

它是如何工作的

为了访问未上传的数据，我们可以使用HTML5文件读取器api。此api提供读取本地文件的功能。这一步非常重要，因为我们需要删除这些数据，以便在浏览器窗口中显示。要获得有关文件读取器的更多信息，您可以阅读。

HTML：

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

---

我希望它能帮助别人

我想得到四个输入文件。我已经测试过了。此操作仅用于一个文件输入。请检查我的更新答案，这将帮助你：）@MaungYeHtunZaw你的代码在这里，它不工作。请检查我需要做什么。我只是在codepen上进行测试，以向您展示。请检查此项，我认为您需要添加JQuery。你现在拿到了吗？像这样试试。。。。。。。。。是的，这是一个文件输入上传预览，我想知道如何预览4个文件输入一个功能。

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