如何使图像表现得像文件输入？

Question

当点击默认照片时，它应该让用户从他的计算机 select 一个文件，而不是让用户首先点击浏览按钮而不是 [=19] 的 input type = "file" =] 一个文件。用户应直接单击默认照片，然后应出现文件 selection window。

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

我应该如何使用这个功能？这是我的默认图片：

Answer 1

如果你想通过 id select 元素，你应该这样做：

document.getElementById('element_id')

如果你想select形成元素，你应该这样做：

document.form_name.element_id

Answer 2

要使 image 的行为类似于输入 file 元素，您只需在单击 [=16= 时调用 input 文件 .click() 方法].

你的代码应该是这样的：

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 访问元素。

Answer 3

在您的函数中为#file 创建点击事件

function pro1(e){
 e.preventDefault();
    document.getElementById('file')[0].click();
    });
  }

Answer 4

您可以使用新选择的图片自动替换图片。

<div class="image-upload">
      <label for="file-input">
        <img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
      </label>

      <input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
    </div>

<script>
        function previewFile(input){
            var file = $("input[type=file]").get(0).files[0];

            if(file){
              var reader = new FileReader();

              reader.onload = function(){
                  $("#previewImg").attr("src", reader.result);
              }

              reader.readAsDataURL(file);
            }
        }
    </script>

如何使图像表现得像文件输入？

How to make image to behave like file input?

html

javascript

css

function

click