网页文件上传表单的制作

2016-02-19 23:50 9 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐网页文件上传表单的制作,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)辛辛苦苦上传完毕之后,突然提示,你上传的文件格式不正确,或者,您上传的文件大小超过限制,,或者其他的提示告诉你,你超长时间的上传等待其实都是白费。 眼看着文件就要上传完毕了,突然断电或者其他情况让你上传停止,你是不是有些崩溃的想法。 选好了文件,点击上传,等等等,等到天荒地老也没任何一点提示,只能惶恐的继续等待,然后发生第一条和第二条的情况。

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

bababian

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

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

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

picasa

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1630725.html

延伸阅读
标签: Web开发
初中级练习,高手朋友们可以飘过。要求达到如下图所示的效果,各位不妨试一试~   代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" hea...
标签: Web开发
想必大家在页面都使用过表单,如果你对单调的表单控制单元不满意,不妨看看以下几条技巧: 1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 textarea 中,一切就会变得简单多了,如: textare...
标签: Web开发
导读:表单聚焦看似一个很小的功能,但也能提高网站的用户体验,当然用JS实现十分简单,本文主要从最基本开始分析如何制作表单自动聚焦的页面。 在登陆界面中,通常,最重要的部分为登陆的Form表。一个非常棒的提升体验的做法是,在载入页面时自动聚焦到第一个提供用户输入的表单框,让用户不用再多一个点击,就可以输入。这被很多网站采用...
标签: Web开发
重读LukeW的《Web Form Design:Filling in the Blanks》感触很深,除佩服LukeW的钻研精神外,更多的是学习他对设计细节的执着和理解。我把对本书的理解,与工作生活中遇到的实际问题结合起来,作为今后设计工作的指导和规范。 有一些元素,看着很简单,设计起来却很头疼。往往这样的元素都具有一个共同的特点变化多,表单的设计就是如此。...
标签: Web开发
使用示例: upload.php ?php include_once "upload.class.php"; if ($Submit != '') {     $fileArr['file'] = $file;     $fileArr['name'] = $file_name;     $fileArr['size'] = $file_size;     $fileArr['type'] = $file_type;    &nbs...

经验教程

454

收藏

96
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部