显示自定义输入字段上的文件的名称

我在我的网站上的上传页面上使用自定义文件输入，它按照我的要求工作唯一的问题是我隐藏了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

显示自定义输入字段上的文件的名称

回答

相关问题