火龙果会员
注册 找回密码
每月超过20万元免费资源,目前收到捐助500
您可以捐助,支持我们的公益事业。
1元 10元 50元 100元
 验证码,看不清楚?请点击刷新验证码 必填
  要资料 文章 文库 视频 Code iProcess 课程 认证 咨询 工具 讲座吧   专家招募  
会员   
要资料
 
追随技术信仰

随时听讲座
每天看新闻
   
  JS/HTML 栏目
 
 
浏览(1605 次) 下载 (39 次)    
 
点击按钮上传文件样式代码
上传文件点击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: 代码简单清晰


 
 
 
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
希望我们的资料可以帮助你学习,也欢迎投稿&提建议给我
频道编辑:winner
邮       件:winner@uml.net.cn

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号