Question

首先，我是Webdevelopment的初学者。我想要做的是添加一个按钮来升级文件，我可以设置样式，并显示所选文件的名称。

我搜索了很多，我越是搜索我发现的更多不同的解决方案。我发现，你不能直接调整输入的样式，因为你不能...... :(。

最后，我从每个解决方案中选择了一点，并得出以下结论：

我为输入[类型文件]设置了一个标签。输入然后由display：none;。

隐藏

现在我可以根据自己的喜好调整范围，如果我点击它，它会调用输入。最后使用小JS，我获取输入的值（所选文件的名称），并在样式按钮上显示span-text的内容。

但看看自己：

＆＃13;

#input-file {
    display: none;
    }

.upload-btn {

    display: block;
    text-align: center;
    margin: 20px auto 20px;
    width: 50%;
    height: 30px;
    background-color: #fcff7f;
    line-height: 30px;

    }

.upload-btn:hover {
    background-color: #c39d5a;
    color: white;
    cursor: pointer;
    }

＆＃13;

<label class="upload-btn">
  <input type="file" id="input-file" onchange="changeText()" />
  <span id="selectedFileName">Browse</span>
</label>


<script type="text/javascript">
  function changeText() {
    var y = document.getElementById("input-file").value;
    document.getElementById("selectedFileName").innerHTML = y;
  }
</script>

＆＃13;

我想知道的是，这有什么问题？根据我的理解，这很简单，很简单，我不理解＆＃34;然而＆＃34;为什么我在互联网上找到的所有解决方案都比较困难。 Tey总是尝试使用假输入，不透明度等等。

所以请非常有经验的人告诉我，我是否可以像这样使用它，还是我必须改变它？什么？

谢谢;）还有很多不良英语的借口。

Answer 1

出于安全原因，此功能在浏览器中不可用。

查看此说明：https://stackoverflow.com/a/15201258/586051

只有Firefox浏览器允许它。请参阅Firefox中的以下示例。

编辑：您可以通过以下方式获取所选文件的文件名：

EDIT2：以下代码段演示了文件上传按钮的样式。在这里，我们实际上伪造它，但最终用户不会知道它。 ;）

EDIT3：在评论中添加fullPath的值。

EDIT4：在HTML

中添加了<div>包装器

＆＃13;

document.getElementById("customButton").addEventListener("click", function(){
  document.getElementById("fileUpload").click();  // trigger the click of actual file upload button
});

document.getElementById("fileUpload").addEventListener("change", function(){
  var fullPath = this.value; // fetched value = C:\fakepath\fileName.extension
  var fileName = fullPath.split(/(\\|\/)/g).pop();  // fetch the file name
  document.getElementById("fileName").innerHTML = fileName;  // display the file name
}, false);

＆＃13;

#fileUpload{
  display: none; /* do not display the actual file upload button */
}

#customButton{  /* style the fake upload button */
  background: yellow;
  border: 1px solid red;
}

＆＃13;

<div>
  <input type="file" id="fileUpload"> <!-- actual file upload button -->
  <button id="customButton">My Custom Button</button>  <!-- fake file upload button which can be used for styling ;) -->
  <span id="fileName"></span>
</div>

＆＃13;

使用CSS和一点JS来设置输入类型文件的样式，这样可以吗？

1 个答案: