如何显示在输入类型文件中选择的文件

How to show which file is selected in Input type File?

本文关键字：文件 类型 选择 输入 何显示 显示      更新时间：2023-09-26

使用下面的代码，我编辑了INPUT TYPE FILE按钮的样式。我现在遇到的问题是它没有显示用户选择了哪个文件。我不知道该怎么做（

HTML代码：

<div class="giz-upload">
<input type="file" size="40" name="d4p_attachment[]">
</div>

样式.css

div.giz-upload{
    width: 157px;
    height: 57px;
    background: url(http://www.gizmoids.com/wp-content/sicons/upload.png);
background-size: 80px 60px;
background-repeat:no-repeat;
overflow: hidden;
}
div.giz-upload input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

以下是JSFIDDLE URL：http://jsfiddle.net/sunita1993/avn9n6sp/

请检查以下代码，希望它能工作：）

$('input[type=file]').change(function (e) {
    $(this).parents('.giz-upload').find('.element-to-paste-filename').text(e.target.files[0].name);
});
.giz-upload {
    display: block !important;
    height: 57px !important;
    background: url(http://www.gizmoids.com/wp-content/sicons/upload.png);
    background-size: 80px 60px;
    background-repeat:no-repeat;
    padding-left: 90px; 
}
.giz-upload input {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<label class="giz-upload">
    <input type="file" size="40" name="d4p_attachment[]" />
    <span class="element-to-paste-filename"></span>
</label>

您可以使用javascript来完成。我给您举了一个使用jQuery框架的例子：

$(function() {
    $("input").on("change", function() {
        var file = this.files;
        console.log(file);
    });
});

当您选择一个文件时，输入值将发生变化。您可以访问该文件，file变量将包含一个包含文件中数据的对象，您可以从中获得所需内容，并将其放在span元素或您想要的位置

JsFiddle 的一个例子

因为在div.giz-upload input中，您已将opacity属性设置为0。

删除不透明度，它将显示文件的名称。

相关文章：