Html 上载的文件名未显示在自定义文件输入中
我使用下面的代码自定义文件输入类型Html 上载的文件名未显示在自定义文件输入中,html,file-upload,input,Html,File Upload,Input,我使用下面的代码自定义文件输入类型 <form class="example" action="#"> <!--<input type="file" class="required-entry filename file" name="filename[]" />--> <div class="fileinputs"> <input type="file" class="file hidden"> <div class="
<form class="example" action="#">
<!--<input type="file" class="required-entry filename file" name="filename[]" />-->
<div class="fileinputs">
<input type="file" class="file hidden">
<div class="fakefile"><input><img src="ravi/images/button_select.gif" /></div></div>
</form>
style.css
<style type="text/css">
body{
color: black;
font-family: arial;
font-size: 13px;
}
form.example input {
background: url('ravi/images/input_boxes.gif') no-repeat 0 -58px;
border: none;
width: 241px;
height: 20px;
padding-left: 3px;
padding-top: 3px;
}
form.example input:focus {
background-color: transparent;
}
form.example div.fileinputs {
position: relative;
height: 30px;
width: 300px;
}
form.example input.file {
width: 300px;
margin: 0;
}
form.example input.file.hidden {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
form.example div.fakefile {
position: absolute;
top: 0px;
left: 0px;
width: 350px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
form.example div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
}
</style>
身体{
颜色:黑色;
字体系列:arial;
字体大小:13px;
}
form.example输入{
背景:url('ravi/images/input_box.gif')不重复0-58px;
边界:无;
宽度:241px;
高度:20px;
左:3倍;
垫面:3件;
}
form.example输入:focus{
背景色:透明;
}
form.example div.fileinputs{
位置:相对位置;
高度:30px;
宽度:300px;
}
form.example input.file{
宽度:300px;
保证金:0;
}
form.example input.file.hidden{
位置:相对位置;
文本对齐:右对齐;
-moz不透明度:0;
过滤器:alpha(不透明度:0);
不透明度:0;
z指数:2;
}
form.example div.fakefile{
位置:绝对位置;
顶部:0px;
左:0px;
宽度:350px;
填充:0;
保证金:0;
z指数:1;
线高:90%;
}
form.example div.fakefile输入{
边缘底部:5px;
左边距:0;
}
页面显示如下图所示
当我单击“选择”按钮时,将显示浏览文件夹,然后我选择图像文件。但在“输入”字段中,未显示上载的图像标题
我从http://www.quirksmode.org/dom/inputfile.html
问题是什么?您需要添加JavaScript代码,如您所引用的页面所述 如果您在测试中使用的代码基本上由您发布的HTML和CSS代码组成,那么您使用的是页面上描述的方法的“纯CSS”版本。在解释基本版本(也使用JavaScript)的编号列表中,第5项描述了“纯CSS”版本中缺少的功能。该功能是“当用户选择了一个文件时,可见的假输入字段应该显示该文件的正确路径” (它实际上不会显示正确的路径。出于安全原因,浏览器不会公开真正的路径。但它们允许您显示文件名部分。)