Невозможно отобразить имя выбранного файла

Question

Я изменил ввод [type = file] и мог получить его на кнопке с зеленым фоном. Используемый код выглядит следующим образом:

<style> 
    #file { 
     height:0px; 
     opacity:0; 
    } 
    #span { 
     left:0px; 
     position:absolute; 
     cursor: pointer; 
    } 
</style> 

<form name="form"> 
    <input type="file" id="file" name="file"/> 
    <span id="span" style="background-color: #7FFFD4">Select a file</span> 

</form> 

<script> 
    var span = document.getElementById("span"); 

    span.onclick = function(event) { 
     document.form.file.click(event); 
    }; 

</script> 

Теперь я не могу просмотреть выбранный файл. Есть ли способ просмотреть файл, который я выбрал рядом с кнопкой?

Заранее спасибо

Answer 1

Вы не можете видеть имя файла, потому что вы установили высоту входного элемента и его непрозрачность к нулю. Вы можете установить непрозрачность 1, и изменить продолжительность, чтобы покрыть кнопку «выбрать файл», например, как-то вроде этого (работает для меня на хром):

#file { 
     opacity: 1; 
} 
#span { 
     left: 3px; 
     position: absolute; 
     cursor: pointer; 
     padding: 10px; 
     top: 3px; 
} 

Вы также можете проверить this

Answer 2

Если вы хотите сохранить файл типа ввода как скрытый и хотите показать его имя файла для span. вы можете сделать что-то вроде ниже.

<input type="file" id="file" name="file" onchange="ChangeText(this, 'span');"/> 
    <span id="span" style="background-color: #7FFFD4">Select a file</span> 

function ChangeText(oFileInput, sTargetID) { 

    document.getElementById(sTargetID).value = oFileInput.value; 
}