Member 13464799 Ответов: 1

Как просмотреть изображение, когда оно выбрано ?

у меня есть 2 неудачных входа
1. Фото Клиента
2.Удостоверение личности

мне нужно просматривать изображения под кнопкой выбора, когда я выбираю изображение.

мой html-код таков 

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


мой 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>


Что я уже пробовал:

мне нужно просмотреть эти 2 изображения под кнопкой выбрать

1 Ответов

Рейтинг:
1

Karthik_Mahalingam

пробовать

<!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[^]

Member 13464799

не показывая idproof. фотография клиента подходит к idproof. но я хочу посмотреть фотографию клиента и удостоверение личности гнойника

Karthik_Mahalingam

смотрите мой код и реализуйте то же самое
проверьте демонстрационную ссылку