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?

Node.js html5 html css javascript
Mar.23,2021

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>

Previous: The problem of parameter shift of $1 in the case of Shell for loop

Next: How to automatically group and statistically sum a column

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu