选择时如何查看图像？ [英] How to view image when it choose ?
本文介绍了选择时如何查看图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有2个失败输入
1.客户照片
2.ID证明
i需要当我选择图像时，在选择按钮下查看图像。
我的HTML代码是
i have 2 fail input
1.Customer Photo
2.ID proof
i need to view images under the choose button when im choose image.
my html code is
<div id="imgc"class="form-group col-sm-3">
<label id="cur">Customer Photo</label>
<input onchange="previewFile()" type="file" id="exampleInputFile">
<img src="images/Customer/user.png" height="150px" width="150px">
<p class="help-block">JPEG,PNG files only</p>
</div>
<div class="form-group col-sm-3">
<label id="cur">ID proof</label>
<input type="file" onchange="previewFile()" id="exampleInputFile">
<img id="blah" src="images/Proof/id.png" height="150px" width="150px">
<p class="help-block">JPEG,PNG or PDF files only</p>
</div> < br $> b $ b
我的javascript
my javascript
<script>
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
我尝试过：
i需要在选择按钮下查看2个图像
What I have tried:
i need to view that 2 images under the choose button
推荐答案
试试
try
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function previewFile(type) {
var selector = type == 'customer' ? '#imgcustomer' : '#imgidproof'
var preview = document.querySelector(selector);
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
</head>
<body>
<div id="imgc" class="form-group col-sm-3">
<label id="cur">Customer Photo</label>
<input onchange="previewFile('customer')" type="file" id="exampleInputFile">
<img id="imgcustomer" src="images/Customer/user.png" height="150px" width="150px">
<p class="help-block">JPEG,PNG files only</p>
</div>
<div class="form-group col-sm-3">
<label id="cur">ID proof</label>
<input type="file" onchange="previewFile('idproof')" id="exampleInputFile">
<img id="imgidproof" src="images/Proof/id.png" height="150px" width="150px">
<p class="help-block">JPEG,PNG or PDF files only</p>
</div>
</body>
</html>
演示 - JSFiddle [ ^ ]
这篇关于选择时如何查看图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
