Стиль css входной файл Firefox (работает и на chrome тоже) - PullRequest
Новая
       7

Стиль css входной файл Firefox (работает и на chrome тоже)

1 голос
/ 26 марта 2020

Я работаю на странице загрузки, где я не могу использовать 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? Кроме того, есть способ сделать перетаскивание входного файла в Inte rnet Explorer тоже?

1 Ответ

0 голосов
/ 26 марта 2020

Хорошо, после нескольких часов проб и ошибок, я действительно нашел реальное решение этой проблемы

Сначала я изменил 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, чтобы иметь возможность перетаскивать (имя файла изменений уже работало) 

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();
};

Единственное единственное ограничение заключается в том, что это не работает в Inte rnet Explorer и старом Edge ... Но, по крайней мере, это работает как для chrome и firefox, так и для нового края.

...