gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:31:39 25 4
gpt4 key购买 nike

我想对每个文件输入进行预览。我有这样的三个文件上传。我想要预览每个输入的上传预览。我不知道如何使用它。 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-idimg标签id必须相同。希望您能理解这段代码。

关于javascript - 如何使用 filereader 对每个文件输入进行预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34523227/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com