美化上传控件二
来源:互联网 发布: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)
}
{
$("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}
*: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>
<a href="#" class="addfile"> <input type="file" name="file" id="file" hideFocus class="addfile" onChange="selfile();"/>+添加附件(也可以放个美化的图片) </a>
- 美化上传控件二
- 美化文件上传控件
- 美化文件上传控件
- 上传控件美化
- 美化上传控件
- input上传控件美化
- html+css上传文件控件美化
- 控件美化
- 控件美化
- C#中winform窗体的美化控件 iriskin(二)
- 工作记录:Form表单上传控件美化与上传文件类型限制
- css点击上传美化
- 美化上传input file
- 【翻译】Styling an input type="file"美化文件上传控件
- WinForm-ListBox控件美化
- Qt控件美化
- android的控件美化
- WinForm-ListBox控件美化
- Lex和Yacc入门教程(八).使用堆栈编译语法
- 一步一步学Remoting之四:承载方式
- db_nk_cache_size
- ClearQuest的动态关联
- 一步一步学Remoting之五:异步操作
- 美化上传控件二
- Microsoft .Net Remoting系列专题之一
- Microsoft .Net Remoting系列专题之二
- 正则表达式教程
- Oracle大对象的使用
- Microsoft .Net Remoting系列专题之三
- ASP.NET 2.0中合并 GridView 的表头单元格
- iGENUS邮件系统软件 V5.0正式推出
- 美国控制中国的一个圈套:“你居然早上刷牙?!”