很多业务系统中,都需要具有上传文件的功能,这里做了一个模拟上传图片的原型,和大家分享一下,有兴趣的朋友可以看下。

Axure 8.0 实例 | 模拟一个上传图片的原型

预览

Axure 8.0 实例 | 模拟一个上传图片的原型

图片有些失真,就将就一下看看吧,如果哪位朋友有好的转换gif图片的方法,可以留言告诉我,感激不尽!下面的图才应该会更好看一些吧

Axure 8.0 实例 | 模拟一个上传图片的原型

一、准备元件

1、添加一个表格。表格作用是作为表头用的,当然也可以用矩形框代替,本人比较懒,就使用表格代替了。这里就列出了上传文件常用的几个信息,如果需要其他的信息,可自行添加;

Axure 8.0 实例 | 模拟一个上传图片的原型

2、存放上传文件的动态面板。用于存放上传的文件的信息使用,就起名字叫“文件”吧;

Axure 8.0 实例 | 模拟一个上传图片的原型

3、添加中继器。在“文件”动态面板里面添加一个中继器,名字就叫“文件信息”。“文件信息”中继器添加六个字段,分别叫“name”、“size”、“user”、“uptime”、“cz1”、“cz2”,这六个字段分别用来存放上传文件的名称、大小、上传人、上传时间、操作(操作有两个),并在“文件信息”中继器中添加五个矩形框,前四个取名叫做“名称”、“大小”、“上传人”、“上传时间”,至于最后一个可以不起名字,因为它只是作为底纹用的^_^。

另外,再加入两个文本标签,分别起名叫“操作1”、“操作2”,且把字体设置成蓝色(软件里操作的基本都是蓝色字体);

Axure 8.0 实例 | 模拟一个上传图片的原型

Axure 8.0 实例 | 模拟一个上传图片的原型

4、存放上传按钮的动态面板。用于存放选择文件、上传及上传提示信息的按钮,命名为“上传”;

5、添加文本框。在“上传”动态面板中,添加一个文本框,用来选择上传文件用,命名为“选择文件”。文本框的类型记得一定是要选择“文件”;

Axure 8.0 实例 | 模拟一个上传图片的原型

6、添加按钮。在“上传”动态面板中,添加一个按钮,用来上传文件用的,命名为“上传”;

7、添加上传提示框。在“上传”动态面板中,添加一个文本标签,用来存放上传提示的,命名为“提示信息”,并设置成隐藏;

Axure 8.0 实例 | 模拟一个上传图片的原型

二、添加用例

1、给“上传”按钮添加用例;本例中演示的是图片的上传,所以“上传”按钮就出现了三种情况:①未选择文件;②选择图片文件;③选择其他文件;

Axure 8.0 实例 | 模拟一个上传图片的原型

1)未选择文件,点击上传时,给出提示信息。通过“上传文件”文本框的内容是否为空去判断;

Axure 8.0 实例 | 模拟一个上传图片的原型

2)选择文件为图片格式。

Axure 8.0 实例 | 模拟一个上传图片的原型

①首先判断上传的文件是不是图片格式,这里列举了常用的几种图片的格式,包括jpg、jpeg、png、bmp、gif。这里使用到了字符串函数substr()和lastIndexOf(),其中substr()函数是用来截取字符串的;lastIndexOf()是从字符串的后面往前查找特定的字符的。

这里的意义是从“上传文件”文本框内容里面截取最后一个“.”后面的字符串;如果截取的字符串是“,jpg”、“.jpeg”、“.png”、“.bmp”、“.gif”中的一个,那么就满足了条件(这里一定要注意上图中的符合是任何而不是全部);

Axure 8.0 实例 | 模拟一个上传图片的原型

②满足条件后,第一件事肯定是要把文件上传了,直接把这个文件的信息保存到“文件信息”中继器中;

Axure 8.0 实例 | 模拟一个上传图片的原型

name:存放选中的文件的名称。名称是从“上传文件”文本框中获取的,是“”后面的部分哦(不明白为什么的童鞋,可以先预览一下,选择一个文件看看就知道了)。在axure中“”是特殊字符什么的,需要转义一下,就是“”了;

Axure 8.0 实例 | 模拟一个上传图片的原型

size:存放上传文件的大小。因为axure只是模拟上传,而不是真的实现了上传,所以并不能获取上传文件的大小,我们这里只是给文件大小随便赋个值,不过如果每次上传都是同一个值的话,感觉很不好了,所以可以用Math.random()随机获取一个大小,这样就更加逼真了;

Axure 8.0 实例 | 模拟一个上传图片的原型

user:存放上传人姓名的。这里只是一个单独的上传功能,没有登陆人的概念,所以只能随便写一个名字了(如果在一个系统中,还可以直接通过变量获取当前登陆人的姓名);

time:存放上传文件的时间。通过获取当前的时间,存入即可。这里使用到了几个日期函数Now.getFullYear()、Now.getMonth()、Now.getDate()、Now.getHours()、Now.getMinutes()、Now.getSeconds(),这几个函数分别是获取当前时间的年、月、日、时、分、秒。因为获取到的月日时分秒可能是一位数字,为了显示美观,使用了字符串连接和截取函数,使获取到的月日时分秒都是两位数字;

Axure 8.0 实例 | 模拟一个上传图片的原型

cz1、cz2:存放操作内容的。这里保存为“预览”和“删除”;

Axure 8.0 实例 | 模拟一个上传图片的原型

设置“文件”动态面板高度;

Axure 8.0 实例 | 模拟一个上传图片的原型

移动“上传”动态面板到“文件”动态面板下方。这里用到了元件的left和bottom属性;

Axure 8.0 实例 | 模拟一个上传图片的原型

X:

Axure 8.0 实例 | 模拟一个上传图片的原型

Y:

Axure 8.0 实例 | 模拟一个上传图片的原型

3)如果上传了文件,但是不是图片格式的,给出提示信息,并把“上传文件”文本框的内容设置成空;

2、“文件信息”中继器添加用例。

1)显示上传到的文件信息。在“文件信息”中继器中添加“每项加载时”用例,将中继器中对应的字段赋值到中继器中对应的字段上;

Axure 8.0 实例 | 模拟一个上传图片的原型

Axure 8.0 实例 | 模拟一个上传图片的原型

2)给“操作2”文字标签添加用例;

Axure 8.0 实例 | 模拟一个上传图片的原型

①删除选中行;

Axure 8.0 实例 | 模拟一个上传图片的原型

②设置“文件”动态面板尺寸为中继器中数据行数的高度;

Axure 8.0 实例 | 模拟一个上传图片的原型

③移动“上传”动态面板到“文件”动态面板下方;

X:

Axure 8.0 实例 | 模拟一个上传图片的原型

Y:

Axure 8.0 实例 | 模拟一个上传图片的原型

预览功能暂时木办法实现,

三、预览

赶紧按下F5享受自己的成果吧!

PS:写的有点乱,有什么不明白或者有更好意见的朋友,可以给我留言,共同探讨^_^