当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 网页文件上传表单的制作

CSS样式表
用css实现图片垂直居中的使用技巧
CSS List Grid Layout 图片垂直居中
IE6网页神奇BUG
Marquee高级用法实例代码
web标准知识——从p开始,循序渐进
web标准知识——用途相似的标签
html链接与文本标签们
当标题不能显示完整的解决方法
详解链接的rel与target区别
使css兼容IE8的小技巧
CSS 首字母大写代码
CSSvista可同时在IE和Fifrefox调试的CSS编辑提供下载
css font缩写总结附实例
css下margin、padding、border、background和font缩写示例
用CSS来控制图片显示大小的代码
css下划线颜色一句话代码
css常见问题解决方法小结
relative absolute无法冲破的等级问题解决
div总是被select遮挡的解决方法
CSS文字截取功能实现代码

CSS样式表 中的 网页文件上传表单的制作


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 158 ::
收藏到网摘: n/a

我们平时在日常网络生活当中,上传则是一个非常重要的功能。尤其是对于那么依靠网友分享的站点来说,上传是用户体验的重要的部分,分享是web2.0时代的主流特色,随之分享而来的上传,则是其中的关键一环。

先来说说以前的上传吧,真是令人苦恼。网络速度缓慢是最直接的原因,当然在交互设计上也存在着让人崩溃的地方,没有清晰的提示和防止出错的设计,让用户使用起来非常的不便利。相信你或多或少都经历过下面的灾难时刻。

  • 辛辛苦苦上传完毕之后,突然提示,你上传的文件格式不正确,或者,您上传的文件大小超过限制,,或者其他的提示告诉你,你超长时间的上传等待其实都是白费。
  • 眼看着文件就要上传完毕了,突然断电或者其他情况让你上传停止,你是不是有些崩溃的想法。
  • 选好了文件,点击上传,等等等,等到天荒地老也没任何一点提示,只能惶恐的继续等待,然后发生第一条和第二条的情况。

说起最初的上传交互,相信你们都记得,一个field text 加上一个button,你可以在field text内输入文件的确切地址,也可以点击按钮浏览你的本地硬盘选择文件。

bababian

事实上,99%的人都不会直接输入文件确切地址,他们都是直接点击浏览选择文件。

我们关注一下用户在上传中所需要关注的关键信息.
文件名,文件大小,上传速度,上传等待时间.

可以发现,上传文件的本地路径就显得并不那么重要,既然不那么重要,为什么我们还需要有一个常常的field text来显示文件的本地路径呢,我们关注的是我们具体是上传哪个文件而已,我们看看 google 的改进方案.

picasa

去掉了field text,只留下一个 button让用户浏览本地,当选择文件后,按钮将显示上传文件的详细文件名(包括后缀)。

这是一个很大的进步,这表示在上传这块领域中开始有先行者的足迹了。勇于去挑战用户习惯,勇于去做更好的设计。

说起上传,我们不能不错过照片上传方式,照片是上传功能使用率最高的站点。因为这涉及到批量上传。我们看看照片站点在这方面的创新。

大部分领先的照片上传采用的都是flash上传工具,如上图,这是在现有技术条件下实现功能跨平台浏览器的最佳方案了,众所周知,不同浏览器对于 web代码的解析都不同,Flash成为现今唯一一个跨平台的通用表现途径。从交互设计上,这种上传满足了所有上传所需要关注的关键字:文件名,文件大小,上传进度提示。比较遗憾的是,并没有提示具体的上传速度和上传时间,当用户上传的图片数较多的时候,就会出现等待不耐烦的情况了。

另外一个照片分享站点有着更加有趣的设计。

看到蓝色进度条右边的几个小箭头吗?具体作用我不太清楚,但是,如果上传期间发生了网络停滞,这几个箭头就会出现,告诉我具体的网络情况。虽然没有告诉我此时具体的上传速度,但是他至少告诉了我我的网络情况。这很有意思。(事实上,这种网络停滞经常出现。)