Question

我们都熟悉html的文件属性。在浏览器中，我们看到一个按钮，其附近有文本“浏览”和“无文件选择”文本。

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

Answer 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)}

Answer 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>

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

Answer 3

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

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

3 个答案:

HTML

CSS：