三、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标准化版块参加讨论，我还想发表评论。