axure制作图片上传案例

是谁让你唤醒我的?我是沉睡中的红龙,掌管着大地的财富,要想夺取一枚金币,必定要付出巨大的代价!

哈哈,小编回来了,好怀念霸气那牛(yin)逼(dang)哄哄的样子,赶紧附上他信手拈来的一个上传图片的案例。

以下是分解步骤

  1. 一如既往的把需要的部件摆好,图片命名为picture;文本框命名为file,属性为:文件;矩形1(细长的那个矩形)命名为pictureN,边框线设为透明;矩形2命名为upload;如下(选中状态):

  2. 接下来就是设置交互事件了,设置pictureN设置文字为上传的图片文字,picture的图片为上传的图片。这里再添加replace函数时,把函数里面的参数都删掉,发布一下原型,复制如图所示的地址(上图)到如下所示的位置(下图)

  1. 预览原型添加图片,得到如下效果,复制"fakepath\"替换掉上面下图的replace参数,记得多加一个"\",得到如下交互事件

  2. 预览原型,最终效果如下,这里的效果因电脑而已,有些电脑会显示图片,有的不会显示,我的刚好跟我玩躲猫猫了....