[英]text box doesn't update when I push the button
I have example here: code example .我在这里有示例:代码示例。
HTML code: HTML代码:
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="file-upload btn btn-primary">
<span>Upload</span>
<br>
<input id="uploadBtn" class="upload" type="file">
</div>
CSS code: CSS代码:
.btn {
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.file-upload input.upload {
cursor: pointer;
font-size: 20px;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
}
.file-upload {
margin-left: 10px;
overflow: hidden;
position: relative;
}
.btn-primary {
background-color: #428bca;
border-color: #357ebd;
color: #fff;
}
JavaScript code: JavaScript 代码:
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
In JSFiddle site, when I push the upload button, the text box are updated, but when I copy the code to files, and run it under Firefox Mozilla, the text box doesn't update.在 JSFiddle 站点中,当我按下上传按钮时,文本框会更新,但是当我将代码复制到文件中并在 Firefox Mozilla 下运行时,文本框不会更新。
I take reference from this site: How to Style a HTML file upload button in Pure CSS我参考这个网站: 如何在纯 CSS 中设置 HTML 文件上传按钮的样式
Any suggestions?有什么建议?
Your JS does not work since the uploadBtn
is not created when you are trying to add the onchange
listener.您的 JS 不起作用,因为在您尝试添加onchange
侦听器时未创建uploadBtn
。 Try waiting for the window to load.尝试等待窗口加载。
window.onload = function() {
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.