<分区>
标签 javascript html css
<分区>
我有一个我需要提交的文件上传按钮。我目前默认使用一些预设样式。
<form class="uploadButton" method="POST" action="upload.php" enctype="multipart/form-data">
<input type="file" name="file[]" multiple>
</form>
最佳答案
你可以试试下面的代码
$('input[type="file"]').on('change', function() {
$('input[type="text"]').val($(this).val());
});
$('span').on('click', function() {
$('input[type="text"]').val($('input[type="file"]').val());
});
form.uploadButton {
position: relative;
display: flex;
}
input[type="text"] {
width: 200px;
height: 40px;
box-sizing: border-box;
border-radius: 2px;
border: 1px solid #ccc;
margin-right: 5px;
}
span {
background: red;
border: 0;
color: #fff;
padding: 0 20px;
width: 80px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
input[type="file"] {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
cursor: pointer;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="uploadButton" method="" action="" enctype="multipart/form-data">
<input type="text">
<span>Browse</span>
<input type="file" name="file[]" multiple>
</form>
关于javascript - 如何设置文件上传按钮的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47974175/
相关文章:
javascript - 如何在 Google Chrome 中启用地理定位?
internet-explorer-9 - 在 IE9 中使用 "border-radius"无效
javascript - 鼠标悬停在 <li> 元素上时动画
javascript - JavaScript 运算符 === 是否可证明可传递?
javascript - 在 Firefox 中启用自定义元素
javascript - 与div相同宽度和高度的iframe
javascript - 使用 'class="select-chosen"'