如何显示在输入类型文件中选择哪个文件？

问题描述：

使用下面的代码，我编辑我的输入类型文件按钮的样式。我现在得到的问题是它没有显示哪个文件用户选择了。我不知道如何做到这一点.. :(如何显示在输入类型文件中选择哪个文件？

HTML代码：

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

的style.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网址：http://jsfiddle.net/sunita1993/avn9n6sp/

和地点将显示，当你隐藏输入文件名的例子吗？ – adeneo 2015-04-02 10:21:36

是的我知道，但有没有什么办法来显示选定的文件，但没有那个浏览按钮？ – 2015-04-02 10:22:26

http://jsfiddle.net/avn9n6sp/1/ – adeneo 2015-04-02 10:29:35

答

请检查以下代码，希望它能起作用:)

$('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

如何显示在输入类型文件中选择哪个文件？

相关推荐