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

CSS样式表
CSS的margin边界叠加深度剖析图文演示
CSS中Float(浮动)相关技巧文章
惊现学习CSS应该注意的方法
使用text-align:justify实现两端对齐一例
CSS整体布局声明的一些使用技巧
推荐深入理解css中的position定位和z-index属性
固定表格的高度超过指定高度就隐藏的方法
推荐个Css的filter常用滤波器属性及语句大全
用css滤镜实现的文字描边效果的代码
用css实现的带阴影的表格效果的代码
推荐个不错的表单Input的高级用法11例
flash幻灯片需要先激活ActiveX控件才能使用的又一个办法
DIV+CSS作网页容易犯的错误小结
ul+li及css制作韩国风格菜单代码
div布局的自由伸展三栏式版面的代码
几乎被设计师遗忘了的标签fieldset legend
不用javascript实现带序号的表格隔行换色的效果
用CSS实现基本条状图表效果
用javascript来控制 链接的target 属性的代码
多浏览器css兼容分析小结

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


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

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

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

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

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

bababian

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

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

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

picasa

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

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

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

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

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

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