Question

我在我网站的上传页面上使用自定义文件输入，并且它按照我的要求工作唯一的问题是我隐藏了filetype =＆＃34;输入＆＃34;的默认布局。但我想显示正在上传的文件的名称，以便用户可以知道他上传了哪个文件以及文件的名称，这是小提琴

这里是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

另一个选择可能是没有使用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元素以满足你的需求。希望这有帮助。

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

2 个答案: