如何使用filereader为每个文件输入进行预览 [英] How to make preview for each file input with filereader

问题描述

我想为每个文件输入做预览。我有三个这样的文件上传。我想预览这个输入'上传预览每个..我不知道如何使用这个。函数在DOM元素上。感谢所有。

I want to make preview for each file input. I have three file upload like this. I want preview of this input' upload preview for each.. I don't know how to use this. function on DOM element. Thank All.

<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代码：

Please take a look at the sample JS code using jquery:

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

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 必须相同。希望你能明白看到这段代码。

The input file data-id and img tag id must be same. Hope you will understand see this code.

这篇关于如何使用filereader为每个文件输入进行预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！