使用下面的代码,我编辑了我的 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 - 如何显示在输入类型文件中选择了哪个文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29410509/