如何更改html文件类型属性中“浏览”按钮旁边的文本“未选择文件”？答案

【问题标题】：How to change the text "no file selected" next to the "Browse" button in html file type attribute?如何更改html文件类型属性中“浏览”按钮旁边的文本“未选择文件”？
【发布时间】：2016-07-26 12:46:25
【问题描述】：

html的file属性大家都很熟悉。在浏览器中，我们看到一个带有“浏览”和“未选择文件”文本的按钮。

如何编辑浏览按钮附近的文本“未选择文件”？
实际上，我想要做的是，用户打开表单，通过该输入上传并提交文件，然后文件被存储在数据库中。当用户打开相同的表单时页面刷新后，应该显示之前上传的文件的名称，而不是“未选择文件”。我怎么做。搜索了很多但一无所获，我对此一无所知，所以没有尝试任何东西。任何帮助，将不胜感激。提前致谢。

【问题讨论】：

请阅读stackoverflow.com/help/how-to-ask。添加一些示例并编辑您的问题
或许，你正在寻找customising file input
也看看storing file

标签： javascript php html

【解决方案1】：

https://stackoverflow.com/a/7691323/6588826 也许这可以帮助你

您可以在这里尝试一个工作示例：http://jsfiddle.net/VQJ9V/307/（在 FF 7、IE 9、Safari 5、Opera 11 和 Chrome 14 中测试）

HTML

<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>

CSS：

.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)}

【讨论】：

【解决方案2】：

<?php
    /* Connect to DB and read the file name */
    $filename = .....;
?>

<input type='text' id='BrowseTextField' />

<script type="text/javascript">
    var filename = '<?php echo $filename; ?>';
    document.getElementById('BrowseTextField').value=filename; 
</script>

这将是一种方法。连接到数据库，读取用户存储的文件名（希望用户已登录并且您有会话）。然后使用 javascript 将该值设置为文本字段。

【讨论】：

【解决方案3】：

这是一个很棒的演示，它可能对 http://tympanus.net/Tutorials/CustomFileInputs/ 有帮助，并且有解释 http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

【讨论】：