鍍金池/ 問答/HTML5  HTML/ 如何通過js如何打開input？

如何通過js如何打開input？

一個按鈕一個input

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

點擊input會彈出上傳文件窗口
但是我想要的效果：點擊button會彈出input上傳窗口，這個用js該怎么實現(xiàn)呢？

回答
編輯回答
情已空

定制文件輸入框(input,type,file)樣式

<!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: #39D2B4;
            color: #fff;
            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: #34495E;
            color: #39D2B4;
        }
        form {
            padding: 1rem 0 0 1rem;
        }
    </style>
</head>
<body>
<h2>點擊按鈕查看演示效果</h2>    
<form action="#">
    <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>
2018年2月7日 09:09
編輯回答
骨殘心

https://jsbin.com/cipefamuma/...

這種么

或者label標(biāo)簽了解一下

2017年3月14日 09:46
編輯回答
萌面人

button,input 自己通過id 或者 tag 獲取，大致寫法如下

button.onclick=function(){
    input.onclick();
}
2017年5月15日 20:53
編輯回答
九年囚

input opactity設(shè)置為0后絕對定為到button上面試試

2017年9月19日 15:21
編輯回答
單眼皮

如果button和input[type=file]都要顯示出來，那么在button的點擊事件中用input.click()觸發(fā)選擇文件窗口；
如果僅需要顯示button，那么可以將input[type=file]絕對定位移到button的上面，并將input[type=file]的透明度設(shè)為0，這樣就只會顯示button，而點擊button時實際上點擊的時input[type=file]

2018年2月21日 00:40
編輯回答
巴扎嘿

點擊button的時候執(zhí)行input的點擊事件就行了。如果不想顯示input file的話，那就調(diào)整它的透明度就行。

<!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>
        $("#btn").click(function(){
            $("#file").click();
        })
    </script>
</body>
</html>
2018年8月3日 20:12
編輯回答
獨特范
$("button").on("click",function () {
        $("input").click()
    })
2017年9月5日 14:45