How to open input? through js

one button, one input

<button>Upload</button>
<input type="file" multiple>

clicking input will pop up the upload window
but the effect I want: clicking button will pop up the input upload window. How can this be achieved with js?


when input opactity is set to 0, absolutely set to try on button


Custom File input Box (input,type,file) style

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>-(input,type,file)</title>
    <style>
        .file-wrapper {
            position: relative;
            width: 225px;
        }
        .file-label {
            display: block;
            padding: 14px 20px;
            background: -sharp39D2B4;
            color: -sharpfff;
            font-size: 1em;
            text-align: center;
            transition: all .4s;
            cursor: pointer;
        }
        .input-file {
            position: absolute;
            top: 0; left: 0;
            width: 225px;
            opacity: 0;
            padding: 14px 0;
            cursor: pointer;
        }
        .input-file:hover + .file-label,
        .input-file:focus + .file-label {
            background: -sharp34495E;
            color: -sharp39D2B4;
        }
        form {
            padding: 1rem 0 0 1rem;
        }
    </style>
</head>
<body>
<h2></h2>    
<form action="-sharp">
    <div class="file-wrapper">
        <input class="input-file" id="my-file" type="file">
        <label tabindex="0" for="my-file" class="file-label">...</label>
    </div>
</form>
</body>
</html>

https://jsbin.com/cipefamuma/.

this?

or label tag to learn about


$("button").on("click",function () {
        $("input").click()
    })

button,input is obtained by itself through id or tag, which is roughly written as follows

button.onclick=function(){
    input.onclick();
}


if both button and input [type=file] are to be displayed, then use input.click () to trigger the select file window in the click event of button ;
if you only need to display button , you can move the input [type=file] absolute positioning to button , and set the transparency of input [type=file] to 0, so that only button is displayed, while input [type=file]

< hr class= "answer > is actually clicked when you click button .

execute the click event of input when you click button. If you don't want to display input file, just adjust its transparency.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn"></button>
    <input type="file" id="file">

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        $("-sharpbtn").click(function(){
            $("-sharpfile").click();
        })
    </script>
</body>
</html>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be8466-318d1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be8466-318d1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?