一个按钮一个input<button>Upload</button><input type="file" multiple>点击input会弹出上传文件窗口但是我想要的效果：点击button会弹出input上传窗口，这个用js该怎么实现呢？
7 回答
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
<!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>
慕妹3242003
TA贡献1824条经验 获得超6个赞
button,input 自己通过id 或者 tag 获取，大致写法如下
button.onclick=function(){
input.onclick();
}
添加回答
举报
0/150
提交
取消