[英]How to show which file is selected in Input type File?
Using this code below, I edit the style of mine INPUT TYPE FILE button.使用下面的这段代码,我编辑了我的 INPUT TYPE FILE 按钮的样式。 The problem I am getting now is its not showing which file user had selected.我现在遇到的问题是它没有显示用户选择了哪个文件。 I don't know how to do this.. :(我不知道该怎么做.. :(
HTML Code: 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;
}
Here is JSFIDDLE URL : http://jsfiddle.net/sunita1993/avn9n6sp/这是 JSFIDDLE 网址: http : //jsfiddle.net/sunita1993/avn9n6sp/
Please check the following code, hope it will work :)请检查以下代码,希望它会起作用:)
$('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>
You can do it using javascript.您可以使用 javascript 来完成。 I let you an example using the jQuery framework:我给你一个使用 jQuery 框架的例子:
$(function() {
$("input").on("change", function() {
var file = this.files;
console.log(file);
});
});
When you select a file the input value will change you can get access to the file, file
variable will contain an object with the data from the file and you can get what you need from it and put it on a span
element or where you want当您选择一个文件时,输入值将更改您可以访问该文件, file
变量将包含一个带有文件中数据的对象,您可以从中获取所需内容并将其放在span
元素或您想要的位置
An example on JsFiddle JsFiddle 的一个例子
Because in div.giz-upload input
you have set the opacity
property to 0.因为在div.giz-upload input
您已将opacity
属性设置为 0。
Remove opacity and it will show file's name.删除不透明度,它将显示文件名。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.