样式 css 输入文件 Firefox（也在 chrome 上工作）

Question

我正在处理无法使用 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">

如何在不破坏 chrome 版本的情况下使其在 firefox 上也能运行？另外，还有一种方法可以在 Internet Explorer 上拖放输入文件吗？

Answer 1

好的，经过几个小时的反复试验，我实际上找到了解决这个问题的真正方法

首先我修改了 css 没有 after

.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。

样式 css 输入文件 Firefox（也在 chrome 上工作）

Style css input file Firefox (working on chrome too)

html

css

upload

file

input