火龙果会员
注册
找回密码
每月超过
20万元
免费资源,目前收到捐助
0
。
您可以捐助,支持我们的公益事业。
1元
10元
50元
100元
必填
求知
文章
文库
Lib
视频
iProcess
课程
认证
咨询
工具
讲座
Model Center
Code
会员
要资料
追随技术信仰
随时听讲座
每天看新闻
JS/HTML 栏目
浏览
(6702 次)
下载
(51 次)
点击按钮上传文件样式代码
上传文件点击input上传文件样式代码实现了上传文件的功能,用户点击算则文件按钮,选择文件,提供了文本和图片两种方式的上传。
keywords:CSS,upload控件,上传
来源:
火龙果
更新日期:2015-2-2
评价
好
中
差
无标题文档
作者:俎涛
代码下载
uploader3.html(标准FileUpload控件)
uploader2.html(控件优化-图片)
uploader1.html(控件优化-文本)
Handler.ashx
用例模型
程序类图
用例设计
用户操作
程序处理
用户点击算则文件按钮,选择文件
触发HtmlPage.html中javaScript代码 fileSelected() 函数,
函数 显示文件的属性
·
Name: 主文档.rtf
·
Size: 0.66KB
·
Type: application/msword
用户点击上传按钮
触发HtmlPage.html中uploadFile()函数,
HtmlPage.html中uploadFile() 函数 发送请求给 Handler.ashx
·
ashx文件接收请求,保存上传的文件,
·
ashx反馈结果
HtmlPage.html显示结果
对象交互图
3个程序变体
实际的应用中,文件本身信息用户不关注,希望把选择和上传2步操作简化为一步,期望界面如下:
设计思路:用新的上传覆盖已有的upload控件的按钮,可以用2种方案制作按钮
1. 图片
2. 效果如下
方案1:图片的HtmlPage的代码样式如下
用CSS制作的覆盖按钮代码如下:
图片的按钮 应用样式代码如下:
方案2:CSS 的文本按钮
CSS样式如下
CSS样式应用代码如下:
zhgx@uml.org.cn: 代码简单清晰