如何使用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>
使用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
必须相同。希望你会明白看到这个代码。
我想获得四个输入文件。我已经为此测试过了。这为一个文件输入工作。 Thk –
请检查我更新的答案这将帮助你:) @MaungYeHtunZaw –
http://codepen.io/maungyehtunzaw/pen/LGbdEO你的代码是在这里,它不工作。查看我需要做什么。我只是测试codepen向你展示。 –
它是如何工作的?
要访问未上传的数据,我们可以使用HTML5文件阅读器api。这个API提供读取本地文件。这一步非常重要,因为我们需要这些数据才能在浏览器窗口中显示它。要获得有关文件阅读器的更多信息,您可以阅读offical documentation.。
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++;
};
};
我希望这会帮助别人。
尝试像这样......... [上载之前的html javascript图像预览 - 代码示例](http://*.com/questions/4459379/preview-an-image-before-它是上传) –
是的,这是一个文件输入上传的预览,我想知道如何预览4个文件输入与一个功能。 –