2 回答
TA贡献1820条经验 获得超9个赞
我会从这样的事情开始。您不需要一堆 javascript 来使一个按钮以编程方式单击另一个按钮。让一些聪明的 css 完成所有的提升。(我已经用解释注释了 css,但如果有任何需要澄清的地方,我很乐意详细说明。)
这个片段让你到达一个点,文件输入的更改会触发你的函数,并且你有一个对输入的引用,并通过扩展它的文件和表单。从那里做任何你需要做的事情。
function handleFileChange ({target}) {
if (target.files.length) {
// do something with the form.
// target.form.submit() or whatever
console.log(target.files);
}
}
const fileInput = document.querySelector('input');
fileInput.addEventListener('change', handleFileChange);
form {
/* provides positioning context for the file input (below) */
position: relative;
/* purely cosmetic */
background: #0099ff;
color: white;
font-weight: bold;
font-size: 3rem;
}
form div {
/* purely cosmetic */
padding: 3rem;
text-align: center;
font-family: sans-serif;
/*
allows clicks to pass through the text
element and hit the file input instead
*/
pointer-events: none;
}
input[type=file] {
/* hides the file input while leaving it clickable */
opacity: 0;
/*
positions the file input to occupy the entire
container, so no matter where you click it triggers
the file chooser
*/
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
<form>
<input type="file" name="some-file" />
<div>Upload a file</div>
</form>
添加回答
举报