火龙果会员
注册 找回密码
每月超过20万元免费资源，目前收到捐助0。
您可以捐助，支持我们的公益事业。
1元 10元 50元 100元
 验证码,看不清楚?请点击刷新验证码 必填
  求知 文章 文库 Lib 视频 iProcess 课程 认证 咨询 工具 讲座 Model Center   Code
会员   
要资料
  
追随技术信仰
随时听讲座
每天看新闻
   
  JS/HTML 栏目
 
 
浏览（6700 次） 下载 （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: 代码简单清晰