我正在开发一个无法使用 jquery 和 bootstrap 的上传页面。在 Chrome 上我使用这段代码 css 代码来解决我的问题.btn-file-upload{ width: 200px; position:relative; height: 40px;}.btn-file-upload:after{ content: attr(value); position: absolute; top: 0; left: 0; bottom: 0; width: 99%; background: white; color: black; border:1px solid rgb(0, 0, 126); border-radius: 2px; text-align: center; font-size: 12px; line-height: 1.7; overflow: visible;}<input type="file" name="theFile" size="60" value="label" onkeypress="javascript:return false;" onchange="changeFileName()" class="btn-file-upload">我怎样才能让它在 Firefox 上工作而不破坏 chrome 版本？另外，有没有办法让输入文件也可以在 Internet Explorer 上拖放？
1 回答
慕标琳琳
TA贡献1830条经验 获得超9个赞
好吧，经过几个小时的尝试和错误，我实际上找到了解决这个问题的真正方法
首先我修改了css，没有之后
.btn-file-upload{
position: relative;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background: white;
color: black;
border: 1px solid rgb(0, 0, 126);
border-radius: 2px;
text-align: center;
font-size: 12px;
line-height: 1.7;
overflow: visible;
height: 40px;
}
其次，我使用按钮+输入而不是输入来设置自定义消息
<button id="inputdrop" onclick="return document.getElementById('getFile').click();return false;" onkeypress="javascript:return false;" class="btn-file-upload">Label</button>
<input size='60' style='width: 187px;display:none' type='file' name="theFile" id="getFile" onchange="changeFileName()">
<span id="filename" class="Testo">No file selected</span>
最后我使用了一些js来进行拖放（changefilename已经可以工作了）
function changeFileName(){
document.getElementById("filename").innerText = code to get file name in struts;
}
//code here go on the onload
document.getElementById("inputdrop").ondragover = document.getElementById("inputdrop").ondragenter = function(evt) {
evt.preventDefault();
};
document.getElementById("inputdrop").ondrop = function(evt) {
document.getElementById("getFile").files = evt.dataTransfer.files;
changeFileName();
evt.preventDefault();
};
唯一的限制是，这不适用于 Internet Explorer 和旧版 Edge...但是，至少，这适用于 Chrome 和 Firefox 以及新版 Edge。
- 1 回答
- 0 关注
- 57 浏览
添加回答
举报
0/150
提交
取消