顯示自定義輸入字段上的文件的名稱

我在我的網站上的上傳頁面上使用自定義文件輸入，它按照我的要求工作唯一的問題是我隱藏了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%; 
}

來源

2016-08-24 uneeb meer

這就夠了： https://jsfiddle.net/tk27sk6q/4/ – Mojtaba

是啊，這很棒，但我將如何顯示它隱藏的領域？ –

你的意思是你有一個隱藏的輸入，並希望將文件的名稱作爲值？確切地說， – Mojtaba

看看我添加的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>

來源

2016-08-24 15:47:30 Mojtaba

你能說什麼！令人敬畏的工作保持良好的工作。謝謝 –

@uneebmeer，（thumbsup） – Mojtaba

另一個的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來適應你的需求。希望得到這個幫助。

來源

2016-08-24 16:07:38

顯示自定義輸入字段上的文件的名稱

回答

相關問題