本来觉得这个系统会很复杂,但把每个部分都分析清楚后,其实需要的技术并不高。不过当我把各个功能函数都整理好准备进行封装时,却发现要把程序封装不是那么容易,因为程序跟html的耦合度太高。然后我逐步把程序中操作html相关的部分分离出来,首先把简单的分离,接着是文件列表,然后是file控件,最后是一些提示性程序。经过几次尝试才把整个结构封装好。
.fu_list {
width:600px;
background:#ebebeb;
font-size:12px;
}
.fu_list td {
padding:5px;
line-height:20px;
background-color:#fff;
}
.fu_list table {
width:100%;
border:1px solid #ebebeb;
}
.fu_list thead td {
background-color:#f4f4f4;
}
.fu_list b {
font-size:14px;
}
/*file容器样式*/
a.files {
width:90px;
height:30px;
overflow:hidden;
display:block;
border:1px solid #BEBEBE;
background:url(/attachment.php?aid=8332&noupdate=yes) left top no-repeat;
text-decoration:none;
}
a.files:hover {
background-color:#FFFFEE;
background-position:0 -30px;
}
/*file设为透明,并覆盖整个触发面*/
a.files input {
margin-left:-350px;
font-size:30px;
cursor:pointer;
filter:alpha(opacity=0);
opacity:0;
}
/*取消点击时的虚线框*/
a.files, a.files input {
outline:none;/*ff*/
hide-focus:expression(this.hideFocus=true);/*ie*/
}
上传文件 | |||
添加文件: | |||
|
|||
温馨提示:最多可同时上传 个文件,只允许上传 文件。 | |||
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在线演示 http://img.jb51.net/online/FileUpload/FileUpload.htm
打包文件下载 http://xiazai.jb51.net/200810/yuanma/FileUpload.rar
您可能感兴趣的文章:
- nodejs利用ajax实现网页无刷新上传图片实例代码
- PHP+JavaScript实现无刷新上传图片
- SpringMVC结合ajaxfileupload.js实现文件无刷新上传
- jsp+ajax实现无刷新上传文件的方法
- js实现头像图片切割缩放及无刷新上传图片的方法
- js动态创建上传表单通过iframe模拟Ajax实现无刷新
- asp.net+js 实现无刷新上传解析csv文件的代码
- asp.net javascript 文件无刷新上传实例代码
- JavaScript实现无刷新上传预览图片功能