三、Html和css代码
html代码
html结构很简单,我们为将其放置到一个class属性为“fileWrap”的div即可,尽管通过js生成了一些html代码,但是,到目前为止,我们只需要简单的这样做就行,即:
< class=”fileWrap”> < type=”file” name=”photo” /> </div>
css代码
设置.fileWrap的属性,他只是一个容器,主要用来容纳“上传图片”按钮<button type=”button”>上传图片<button>,错误提示消息<p class=”mes”></p>以及图片显示的区域<div class=”imgWrap”><img src=”” /></div>。最后生成的完整代码如下:
<div class="fileWrap">; <div class="imgWrap">; <img src="/lib/img/defImage.gif"/>; </div>; <div class="fakefile">; <button type="button">;浏览图片</button>; <p class="mes"/>; <input type="file" class="file fakeCn" name="photo" id="file_0"/>; </div>; </div>
我们对照生成的代码,定义相关的css属性;
定义fileWrap需要注意的,需要给其添加overflow:hidden属性,以确保文本上传控件不会超出点击区域,因为文本上传控件是借助定位使其覆盖在“点击按钮”之上的,另外给其定义一个合适的宽度,fileWrap的css属性如下:
div.fileWrap{ overflow:hidden; width:110px; }
放置图片的容器imgWrap,为确保图片能居中显示,只需定义text-align:center;即可。
div.imgWrap{ text-align:center; }
我们将文件上传控件放到class属性为fakefile的div中,这样是为了方便定位,设置其定位属性为position:relative。需要注意的是,我们要定义padding-top属性,这是因为错误信息位于按钮的下方,而该按钮是被绝对定位的,如果不定义padding-top属性,错误信息将被按钮覆盖。Padding-top的值略高于按钮的高度,代码如下:
div.fakefile{ padding-top:25px; position:relative; }
对于“上传图片”按钮和错误信息,其css代码如下:
div.fakefile button{ left:10px; position:absolute; top:3px;/*确保按钮与图片之间不会靠的太近*/ z-index:1; } div.fakefile .mes{ padding:0 3px; text-align:left; }
对于文本上传控件,设置透明度为0,并定义left值,是其便宜,确保点击区域位于“上传图片”的上方,代码如下:
div.fakefile input{ left:-135px;/*大约为输入框的宽度*/ opacity:0; filter:alpha(opacity:0); -moz-opacity:0; z-index:2;/*确保控件位于按钮上方*/ }
出处:Denis'Blog
责任编辑:bluehearts
上一页 使用jQuery改进文件上传控件 [1] 下一页 使用jQuery改进文件上传控件 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|