分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了将 css 应用于 input[type=file] 时获取文件名，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决将 css 应用于 input[type=file] 时获取文件名？

开发过程中遇到将 css 应用于 input[type=file] 时获取文件名的问题如何解决？下面主要结合日常开发的经验，给出你关于将 css 应用于 input[type=file] 时获取文件名的解决方法建议，希望对你解决将 css 应用于 input[type=file] 时获取文件名有所启发或帮助；

将 css 应用于 input[type=file] 时获取文件名

我正在尝试通过 input 获取文件。我通过 CSS 隐藏输入并给标签一个样式。这里有问题。

如果输入被隐藏，默认输入按钮不支持支持的获取文件名。我想 Vanila Js 可以解决这个问题，但我不知道该怎么做。我试图获取文件的值并将其放入指定为内部 HTML 的框中，但没有成功。

.submit{
   wIDth:140px;
   height:40px;
   BACkground-color:red;
   color:#fff;
   text-align:center;
   padding:10px;
   line-height:40px;
   @R_262_10930@or:pointer;
}

<input type="file" ID="test" style="display:none;">
<label for="test">
    <span class="submit">submit</span>
    <span ID="test2">filename</span>
</label>

解决方法

在此Answer之后，您可以获得文件名，并使用innerHTML将其显示给用户。

document.getElementById('test').addEventListener("change",function() {
  var fullPath = document.getElementById('test').value;
  if (fullPath) {
    var starTindex = (fullPath.indexOf('\\') >= 0 ? fullPath.lasTindexOf('\\') : fullPath.lasTindexOf('/'));
    var filename = fullPath.subString(starTindeX);
    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
      filename = filename.subString(1);
    }
    document.getElementById("test2").innerHTML = filename;;
  }
});

.submit {
  width: 140px;
  height: 40px;
  BACkground-color: red;
  color: #fff;
  text-align: center;
  padding: 10px;
  line-height: 40px;
  @R_262_10930@or: pointer;
}

<input type="file" id="test" style="display:none;">
<label for="test">
    <span class="submit">submit</span>
    <span id="test2">filename</span>
</label>

你的 HTML

<input type="file" id="test" style="display:none;">
<label for="test">
    <span class="submit">submit</span>
    <span id="test2">filename</span>
</label>

你的 CSS

.submit{
   width:140px;
   height:40px;
   BACkground-color:red;
   color:#fff;
   text-align:center;
   padding:10px;
   line-height:40px;
   @R_262_10930@or:pointer;
 }

和 Javascript

let file = document.querySELEctor('#test');
let test2 = document.querySELEctor('#test2');

file.addEventListener('change',function(E){
  test2.innerHTML = e.target.files[0].name;
});

演示在这里 https://jsfiddle.net/jozsefk/4gwzrj38/

@H_696_75@