自定义上传控件样式--JavaScript/Ajax--编程设计网

=波波日志 > JavaScript/Ajax > 自定义上传控件样式=

自定义上传控件样式

　　有些时候我们不需要默认的上传控件input=file的样式，而是现实自定义的样式和文字，而不是单一的“浏览...”样式，我们可以使用浮动层来实现。
　　原理：将上传控件input=file设置为透明的，然后添加2个控件。
1）一个在上传控件input=file的“浏览...”按钮下面，因为上传控件input=file是透明的，所以看到的是这个自己定义的控件，不过注意大小和位置要和上传控件input=file的“浏览...”一致。
2）一个放置在上传控件input=file控件的输入区域，遮盖住输入区域，防止点击输入部分显示光标。要不即使透明点击输入部分还是会显示光标。

大概的效果代码如下

-HTML

<iframe name="upload_target" id="upload_target" style="display:none"></iframe>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" name="docFrm">
    <div style="position:relative;width:225px;"> <!--下面3个控件的位置不要更改，但是另外2个控件如何遮盖住file控件，如果在你的浏览器上有差异，自己调下style属性-->
      <input type="button" value="选择文件" style="position:absolute;right:0px;"  /><!--显示给用户看的，注意按钮大小要和file的浏览基本一致，要不点击其他这个按钮的其他区域可能无法弹出选择文件窗口-->
      <input name="myfile" type="file" onchange="postFrm(this)" style="position:relative;opacity:0;filter:alpha(opacity=0)" /><!--透明file控件-->
      <div style="position:absolute;height:25px;width:150px;background:#fff;top:0px;left:0px;"></div><!--这个遮盖住file控件前面的输入框，要不即使透明了点击输入部分会显示光标-->
    </div>
</form>
<script type="text/javascript">
function postFrm(fl){
   document.docFrm.submit();//提交由file控件的表单
  //重新设置file控件容器的innerHTML清空file控件的vlaue属性
  fl.parentNode.innerHTML=fl.parentNode.innerHTML;
}
</script> 

类别：JavaScript/Ajax　作者：波波　日期：2010-08-17　【评论：0】　

上一篇：jquery autocomplete 使用说明文档　
下一篇：uncaught exception: [Exception... "Component returned failure code: 0x80520012 (NS_ERROR_FILE_NOT_FOUND) [nsIDOMHTMLFormElement.submit]" nsresult: "0x80520012 (NS_ERROR_FILE_NOT_FOUND)" location: "JS frame :: :: anonymous :: line 11" data: no]

暂时没有评论！

发表留言

百度赞助