[英]Custom upload button with CSS & JavaScript
I'm trying to code a custom upload button. 我正在尝试编写自定义上传按钮的代码。 I've hidden the regular one and then put a div with image background over the top. 我已经隐藏了常规对象,然后在顶部放置了一个带有图像背景的div。
It works great but I want to fill the (disabled) input field below with the file name once the user selects a file but it's not working. 效果很好,但是一旦用户选择了文件却无法正常工作,我想用文件名填写下面的(禁用)输入字段。
JavaScript: JavaScript:
document.getElementById("upload_button").onchange = function () {
document.getElementById("upload_file").value = this.value;
};
HTML: HTML:
<div id="Form_FileInput_Container"><input type="file" id="upload_button" /></div>
<input class="Form_Input" id="upload_file" placeholder="Choose File" disabled="disabled" />
CSS: CSS:
#Form_FileInput_Container { position: relative; width: 100px; height: 100px; background: #e5e5e5 url('path/to/upload/image/forms_upload.png') no-repeat; border: 1px solid #cccccc; }
#Form_FileInput_Container input { filter: alpha(opacity=0); opacity: 0; width: 100px; height: 100px; }
Any help is most appreciated :) 任何帮助是最感激的:)
Make sure you attach your JavaScript after the elements exist. 确保元素存在后附加JavaScript 。
<input id="foo" type="file" />
<input id="bar" type="text" placeholder="Choose File" disabled />
// after elements exist
var foo = document.getElementById('foo'),
bar = document.getElementById('bar');
foo.addEventListener('change', function () {
var slash = this.value.lastIndexOf('\\');
bar.value = this.value.slice(slash + 1);
});
HTML: HTML:
<input type="file" id="upload_button" onchange="cutomButton()" />
JS: JS:
function customButton() {
var z=document.getElementById("upload_button").value;
document.getElementById("upload_file").value = z;
alert(document.getElementById("upload_file").value);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.