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

【问题标题】：How to make image to behave like file input?如何使图像表现得像文件输入？
【发布时间】：2019-02-19 09:34:49
【问题描述】：

当点击默认照片时，它应该让用户从他的计算机中选择一个文件，而不是创建一个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".

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

【问题讨论】：

window.prolis

标签： javascript html css function click

【解决方案1】：

要使image 的行为类似于输入file 元素，您只需在单击img 时调用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 访问元素。

【讨论】：

您可以在获取文件后将其分配回图像
@karthik 是的，当然那是另一回事。但我不认为，这就是他要寻找的东西。

【解决方案2】：

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

document.getElementById('element_id')

如果你想选择表单元素，你应该这样做：

document.form_name.element_id

【讨论】：

【解决方案3】：

在你的函数中为#file创建一个点击事件

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

【讨论】：

【解决方案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>

【讨论】：