Как заставить фотографию функционировать как <input type = "file">? - PullRequest
Новая
       7

Как заставить фотографию функционировать как <input type = "file">?

0 голосов
/ 14 сентября 2018

При щелчке фотографии по умолчанию пользователь должен выбрать на своем компьютере файл, отличный от input type = "file", который заставляет пользователя сначала нажать кнопку обзора, а затем выбрать файл.Пользователь должен непосредственно щелкнуть на фотографии по умолчанию, и должно появиться окно выбора файла. 

<html lang = "en">
    <head>
        <title>
            Profile Click
        </title>
        <style>
            #file{
                display: none;
            }
        </style>
    </head>
    <body>
        <script>
            function pro1(){
                document.prolis.getElementById("image") = document.prolis.getElementById("file");
            }
        </script>
        <form name = "prolis">
        <img src = "index.jpg" id = "image" onclick = "pro1()";>
        <input type = "file" id = "file">
    </body>
</html>
Mozilla Firefox console shows "TypeError: document.prolis.getElementById is not a function".

Как мне заставить эту функцию работать?Это мое изображение по умолчанию:

enter image description here

Ответы [ 3 ]

0 голосов
/ 14 сентября 2018

Чтобы image вел себя как элемент ввода file, вы можете просто вызвать метод input file .click() при нажатии на img.

Вот как должен быть ваш код: 

function pro1(){
   document.getElementById("file").click();
}

Демо: 

<html lang = "en">
    <head>
        <title>
            Profile Click
        </title>
        <style>
            #file{
                display: none;
            }
        </style>
    </head>
    <body>
        <script>
            function pro1(){
                document.getElementById("file").click();
            }
        </script>
        <form name = "prolis">
        <img src = "index.jpg" id = "image" onclick = "pro1()";>
        <input type = "file" id = "file">
    </body>
</html>

Примечание:

Вам просто нужно использовать document.getElementById("file") для доступа к элементу по id.

0 голосов
/ 14 сентября 2018

Создайте событие клика для #file в вашей функции 

function pro1(e){
 e.preventDefault();
    document.getElementById('file')[0].click();
    });
  }
0 голосов
/ 14 сентября 2018

Если вы хотите выбрать элемент по идентификатору, вы должны сделать это так: 

document.getElementById('element_id')

Если вы хотите выбрать элемент формы, вы должны сделать это так: 

document.form_name.element_id
...