Ort*_*iga 20
不,你可以做的是一个(丑陋的)解决方法,但很大程度上使用
在这里,您可以看到完整的解释以及代码:
http://www.quirksmode.org/dom/inputfile.html
小智 8
下面的代码对于隐藏默认浏览按钮和使用自定义非常有用:
(function($) {
$('input[type="file"]').bind('change', function() {
$("#img_text").html($('input[type="file"]').val());
});
})(jQuery).file-input-wrapper {
height: 30px;
margin: 2px;
overflow: hidden;
position: relative;
width: 118px;
background-color: #fff;
cursor: pointer;
}
.file-input-wrapper>input[type="file"] {
font-size: 40px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
cursor: pointer;
}
.file-input-wrapper>.btn-file-input {
background-color: #494949;
border-radius: 4px;
color: #fff;
display: inline-block;
height: 34px;
margin: 0 0 0 -1px;
padding-left: 0;
width: 121px;
cursor: pointer;
}
.file-input-wrapper:hover>.btn-file-input {
//background-color: #494949;
}
#img_text {
float: right;
margin-right: -80px;
margin-top: -14px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="file-input-wrapper">
<button class="btn-file-input">SELECT FILES</button>
<input type="file" name="image" id="image" value="" />
</div>
<span id="img_text"></span>
</body>截至 2022 年，现代浏览器支持文件按钮伪选择器。我只是在 Safari v16.1 上苦苦挣扎，它没有按预期工作，必须解决按钮隐藏问题（::-webkit-file-upload-button部分）。
input[type=file]::file-selector-button {
display: none;
}
input[type=file]::-webkit-file-upload-button {
display: block;
width: 0;
height: 0;
margin-left: -100%;
}
input[type=file]::-ms-browse {
display: none;
}
您还可以使用简洁的语法：
::file-selector-button {
/* ... */
}
::-webkit-file-upload-button {
/* ... */
}
::-ms-browse {
/* ... */
}
小智 7
遇到这个问题，感觉没有任何答案是干净的。这是我的解决方案：
<label>
<span>Select file</span>
<input type="file" style="display: none">
</label>
单击标签时，将打开选择文件对话框。不需要 js 来实现它。
您可以将标签设置为看起来像按钮。
这是使用 w3css 和 font Awesome 的示例：
<label class="w3-button w3-blue w3-round">
<span><i class="fas fa-image"></i></span>
<input type="file" style="display: none" >
</label>
当然，您需要向输入添加一个事件侦听器以检测是否选择了文件。
.dropZoneOverlay, .FileUpload {
width: 283px;
height: 71px;
}
.dropZoneOverlay {
border: dotted 1px;
font-family: cursive;
color: #7066fb;
position: absolute;
top: 0px;
text-align: center;
}
.FileUpload {
opacity: 0;
position: relative;
z-index: 1;
} <div class="dropZoneContainer">
<input type="file" id="drop_zone" class="FileUpload" accept=".jpg,.png,.gif" onchange="handleFileSelect(this) " />
<div class="dropZoneOverlay">Drag and drop your image <br />or<br />Click to add</div>
</div>我找到了一个很好的方法来实现这一点在input = file中删除浏览按钮.
此解决方案背后的基本原理是它创建一个透明的input = file控件,并在文件控件下创建一个对用户可见的图层.input = file的z-index将高于该层.
有了这个,它似乎是文件控件本身.但实际上当你点击它时,输入=文件是单击的文件,将出现选择文件的对话框.