如何使照片用作& lt;输入类型=& quot;文件& gt;&gt ;? [英] How to make photo to function as <input type = "file">?

查看:101
本文介绍了如何使照片用作& lt;输入类型=& quot;文件& gt;&gt ;?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

单击默认照片后,除了使 input type ="file" (使用户首先单击浏览按钮而不是选择)之外,还应使用户从计算机中选择文件.一份文件.用户应直接单击默认照片,然后会出现一个文件选择窗口.

When the default photo is clicked it should make a user to select a file from his computer other than making an input type = "file" that makes the user to first click on browse button than select a file. A user should directly click on default photo and a file selection window should appear.

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

如何使此功能起作用?这是我的默认图片:

How should I make this function work? This is my default image:

推荐答案

要使 image 的行为类似于输入的 file 元素,只需调用当您单击 img 时,输入文件 .click()方法.

To make the image behave like an input file element, you can just call the input file .click() method when you click on the 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 来访问元素.

You just need to use document.getElementById("file") to access an element by its id.

这篇关于如何使照片用作&amp; lt;输入类型=&amp; quot;文件&amp; gt;&gt ;?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆