如何通过js如何打开input?

一个按钮一个input


<button>Upload</button>

<input type="file" multiple>

点击input会弹出上传文件窗口

但是我想要的效果:点击button会弹出input上传窗口,这个用js该怎么实现呢?


牛魔王的故事
浏览 707回答 7
7回答

慕容708150

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

梦里花落0921

input opactity设置为0后绝对定为到button上面试试

蝴蝶不菲

定制文件输入框(input,type,file)样式<!DOCTYPE HTML><html><head>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <title>三十客-定制文件输入框(input,type,file)样式</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .file-wrapper {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 225px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .file-label {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 14px 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #39D2B4;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 1em;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all .4s;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .input-file {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0; left: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 225px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 14px 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .input-file:hover + .file-label,&nbsp; &nbsp; &nbsp; &nbsp; .input-file:focus + .file-label {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #34495E;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #39D2B4;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; form {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 1rem 0 0 1rem;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body><h2>点击按钮查看演示效果</h2>&nbsp; &nbsp;&nbsp;<form action="#">&nbsp; &nbsp; <div class="file-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <input class="input-file" id="my-file" type="file">&nbsp; &nbsp; &nbsp; &nbsp; <label tabindex="0" for="my-file" class="file-label">选择一个文件...</label>&nbsp; &nbsp; </div></form></body></html>

慕妹3242003

button,input 自己通过id 或者 tag 获取,大致写法如下button.onclick=function(){&nbsp; &nbsp; input.onclick();}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript