样式 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">我怎样才能让它在 Firefox 上工作而不破坏 chrome 版本？另外，有没有办法让输入文件也可以在 Internet Explorer 上拖放？

Answer 1

好吧，经过几个小时的尝试和错误，我实际上找到了解决这个问题的真正方法

首先我修改了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。