Настройка файла с помощью css

Question

Я пробовал настроить кнопку загрузки файла с помощью css.

<label class="custom-file-input"> 
    <input type="file" name="file" id="videofile" /> <!--class="dropzone"--> 
</label> 

Полный код в jsfiddle. https://jsfiddle.net/2e7dLvoy/

Как я могу показать имя файла, которое выбрано так же, как и обычная кнопка загрузки файла?

Answer 1

Используйте этот

HTML:

<div class="form-group upload_btn"> 

    <div class="fileUpload pull-left"> 
    <span>Browse</span> 
    <input type="file" class="upload " id="uploadBtn"> 
    </div> 
    <input disabled="disabled" class="input pull-left" placeholder="Upload your resume" id="uploadFile"> 
</div> 

Css:

.form-group.upload_btn { 
    overflow: hidden; 
    margin-bottom: 20px; 
} 

.fileUpload { 
    background: #e1e1e1 none repeat scroll 0 0; 
    color: #626262; 
    display: inline-block; 
    font-size: 18px; 
    font-weight: 300; 
    overflow: hidden; 
    padding: 5.5px 10px; 
    position: relative; 
} 

.pull-left { 
    float: left; 
} 

.fileUpload input.upload { 
    cursor: pointer; 
    font-size: 20px; 
    left: 0; 
    margin: 0; 
    opacity: 0; 
    padding: 0; 
    position: absolute; 
    top: 0; 
} 

.upload_btn .input { 
    width: 79%; 
} 

.input { 
    border: 0px; 
    padding: 8px; 
    box-shadow: none; 
    background-color: #fff; 
} 

Js:

document.getElementById("uploadBtn").onchange = function() { 
    document.getElementById("uploadFile").value = this.value; 
}; 

Вот jsfiddle ссылка

Answer 2

попробовать это:

скрипку с JQuery: https://jsfiddle.net/2e7dLvoy/4/

HTML

<label class="custom-file-input"> 
    <input type="file" name="file" id="videofile" /> <!--class="dropzone"--> 
    <p id="selectedFile"></p> 
</label> 

CSS

.custom-file-input { 
    display: inline-block; 
    position: relative; 
    color: #533e00; 
} 
.custom-file-input input { 
    visibility: hidden; 
    width: 100px 
} 
.custom-file-input:before { 
    content: 'Drag & Drop'; 
    display: block; 
    background: -webkit-linear-gradient(-180deg, #ffdc73, #febf01); 
    background: -o-linear-gradient(-180deg, #ffdc73, #febf01); 
    background: -moz-linear-gradient(-180deg, #ffdc73, #febf01); 
    background: linear-gradient(-180deg, #ffdc73, #febf01); 
    border: 3px solid #dca602; 
    border-radius: 10px; 
    padding: 5px 0px; 
    outline: none; 
    white-space: nowrap; 
    cursor: pointer; 
    text-shadow: 1px 1px rgba(255,255,255,0.7); 
    font-weight: bold; 
    text-align: center; 
    font-size: 10pt; 
    position: absolute; 
    left: 0; 
    font-size: 12px; 
} 
.custom-file-input:hover:before { 
    border-color: #febf01; 
} 
.custom-file-input:active:before { 
    background: #febf01; 
} 
p { 
    float: left; 
    margin: -5% 14% 0% 32%; 
} 

JQuery

$('input[type=file]').change(function(e){ 
      $in=$(this); 
      $('#selectedFile').html($in.val()); 
});