Question

Axure图片上传原型怎么设计？

Answer 1

现在的网站或者APP都有图片上传的功能，并且还可以进行自动的预览！而我们想要在Axure原型软件里面制作出来这样的一个原型效果，应该怎么操作呢？下面将通过具体的操作步骤教程来教大家怎么进行Axure图片上传原型设计！对于准备自学或者正在自学Axure的小伙伴，那么我建议你学习体验的Axure自学视频课，0基础到案例实操，全面学习~

Axure图片上传原型设计的方法步骤：

一、第一步：放置元件

首先在页面上放置3个元件：1个文本框，2个矩形。

文本框记得设置输入类型为“文件”：

中间大的矩形选张图片作为填充背景：

二、第二步：设置ID

给这3个元件设定ID，分别是：fileChose、changeIMG、fileTypeField。

三、第三步：添加交互动作1.fileChose，文本框

主要脚本代码写在了这个元件上，通过Javascript模拟了文件选择动作。选中文本框以后，添加一个“隐藏”交互动作，当隐藏时，打开链接到URL，然后把javascript代码贴进去。

上一个教程的时候也有朋友问我，这里执行JS脚本为什么用隐藏的交互，而不是直接“载入时”。

主要是考虑复制元件使用时，JS会有冲突，所以通过主按钮做了一个刷新，具体的我在下一篇文章做扩展应用时会用到，你也可以暂时做成“载入时”交互。

这里加了一个在文件加载前识别常规图片格式的判断，如果不是PNG等，会停止加载并弹警告。

大家最喜欢的拷贝代码环节：

*前面提到浏览器安全限制，无法直接访问本地文件，所以这里是通过以下这段代码解决的：

原理就是将文件读取为DataURL，一段以data:开头的字符串。DataURL是一种将图像与html等格式的小文件直接嵌入文档的方案，这个玩法估计前端开发的同学会比较熟。

2.changeIMG，矩形

记得确认设置了矩形的填充为图片。添加一个单击动作，填入代码：

同时设定移入移出的交互，切换fileChose文本框的隐藏状态，以便根据交互动作重载JS脚本。

3.fileTypeField，矩形

这个是用来展示上传图片的格式的文本，非必要，没有交互脚本。

四、第四步：创建动态面板

通过创建动态面板，把不需要显示的元件隐藏。

为了让元件看起来更美观，我们可以通过动态面板的可见区域的设置完成这个，把文本框拖到范围以外，并且记得把动态面板的“自适应内容”的勾去掉，这样文本框就看不到了。

以上就是关于“Axure图片上传原型怎么设计？”的全部精彩内容分享了，希望你能从中有所收获哦！如果觉得一篇文章不够尽兴，那么Axure相关文章可别错过！总而言之，学习道路，单一知识是很难成就自我全面发展的！想要全面精通擅长一个技能，那么学习也得全面！来，全面学习Axure，综合获取知识点，快速有效促成独立自主原型设计~