美化上传控件二

来源:互联网 发布:linux版eclipse下载 编辑:程序博客网 时间:2024/06/09 16:15
美化上传控件的办法;
还有一个问题就是,如何利用这一个控件,进行多个文档的上传工作?
    利用dom操作,当每次选择了一个文件的时候,隐藏该file域,在相同位置创建一个新的供下次点击,删除的时候只要直接删掉隐藏的就行了[初步想法未经证实]
一直以来上传控件input file都无法进行美化,例如换个图片什么的;查了很多资料最终就是需要利用隐藏file域实现上传功能;其实很简单,从163里面找了一个样式出来,搞定;

js代码: //依赖prototype.js
function selfile()
{
  $(
"fileurl").value = $("file").value;
//如document.form1.fileurl.value=document.form1.file1.value (d)
}   

css代码://来自mail.163.com
a.addfile{width:70px;height:20px;position:relative;cursor:hand;top:4px;top/**/:0;text-decoration:none;background-position:-823px -17px;display:inline;float:left;margin-top:-5px;margin-top/**/:-1px}
*:lang(zh) a.addfile
{margin-top:-2px;cursor:pointer}
a.addfile:hover
{background-position:-911px -17px;text-decoration:none}
input.addfile
{width:1px;height:18px;cursor:pointer!important;cursor:hand;position:absolute;top:5px;left:-5px;left/**/:-3px;opacity:0;filter:alpha(opacity=0)}
*:lang(zh) input.addfile
{left:-18px}

html代码://
<input type="text" value="" id="fileurl" name="fileurl" readonly/>
<a  href="#" class="addfile"> <input type="file" name="file" id="file" hideFocus class="addfile" onChange="selfile();"/>+添加附件(也可以放个美化的图片) </a>
原创粉丝点击