показать имя файла в пользовательском поле ввода

Question

Я использую пользовательский ввод файла на странице загрузки на моем веб-сайте, и он работает согласно моему требованию, единственная проблема - я скрыл макет по умолчанию filetype = "input", но я хочу, чтобы показать имя загружаемого файла, так что пользователь может знать, какой файл он uploadedand имя файла вот скрипку

JsFiddle

вот HTML и CSS

<div class="custom-upload"> 
    <div class="fake-file"> 
    <input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" /> 
    </div> 
</div> 

.custom-upload { 
    position: relative; 
    height: 40px; 
    width: 100%; 
    margin-top: 20px; 
    border-bottom: 1px solid #625f5b; 
} 

.custom-upload input[type=file] 
{ 
    outline:none; 
    position: relative; 
    text-align: right; 
    -moz-opacity:0 ; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    z-index: 2; 
    width:100%; 
    height:100%; 

} 

.custom-upload .fake-file 
{ 
    background:url(https://s4.postimg.org/hy3g354ot/upload.png) center right no-repeat; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    z-index: 1; 
    line-height: 100%; 
} 

.custom-upload .fake-file input 
{ 
    font-size:16px; 
    height:40px; 
    width: 100%; 
} 

Answer 1

Посмотрите на JavaScript, который я добавил.

Примечание: Я использовал jQuery. Если вы используете родной JavaScript, я должен изменить код

$(function(){ 
 
    $("#fileToUpload").on('change',function(){ 
 
    fpath = $(this).val(); 
 
    $('#filePath').html('<b>You selected the file:</b> ' + fpath); 
 
    }); 
 
});

.custom-upload { 
 
    position: relative; 
 
    height: 40px; 
 
    width: 100%; 
 
    margin-top: 20px; 
 
    border-bottom: 1px solid #625f5b; 
 
} 
 

 
.custom-upload input[type=file] 
 
{ 
 
    outline:none; 
 
    position: relative; 
 
    text-align: right; 
 
    -moz-opacity:0 ; 
 
    filter:alpha(opacity: 0); 
 
    opacity: 0; 
 
    z-index: 2; 
 
    width:100%; 
 
    height:100%; 
 

 
} 
 

 
.custom-upload .fake-file 
 
{ 
 
    background:url(https://s4.postimg.org/hy3g354ot/upload.png) center right no-repeat; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    z-index: 1; 
 
    line-height: 100%; 
 
} 
 

 
.custom-upload .fake-file input 
 
{ 
 
    font-size:16px; 
 
    height:40px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="custom-upload"> 
 
    <div class="fake-file"> 
 
    <input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" /> 
 
    </div> 
 
    <div id="filePath"> 
 
    
 
    </div> 
 
</div>

Answer 2

Другой Choise может быть без использования JQuery, но Чистый JavaScript. Это мое решение.

<span id='filename'></span> 
<div class="custom-upload"> 
    <div class="fake-file"> 
    <input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" /> 
    </div> 
</div> 
<script> 
    document.getElementById('fileToUpload').addEventListener('change', function() { 
    var dest = document.getElementById('filename'); 
    dest.innerHTML = document.getElementById('fileToUpload').value; 
    }); 
</script> 

Я дал вам персонализацию css элементов в соответствии с вашими потребностями. Надеюсь, что эта помощь.