Axure图片上传原型怎么设计?
2023-06-28 · 百度认证:重庆猪八戒网络有限公司官方账号
现在的网站或者APP都有图片上传的功能,并且还可以进行自动的预览!而我们想要在Axure原型软件里面制作出来这样的一个原型效果,应该怎么操作呢?下面将通过具体的操作步骤教程来教大家怎么进行Axure图片上传原型设计!对于准备自学或者正在自学Axure的小伙伴,那么我建议你学习体验的Axure自学视频课,0基础到案例实操,全面学习~
Axure图片上传原型设计的方法步骤:
一、第一步:放置元件首先在页面上放置3个元件:1个文本框,2个矩形。
文本框记得设置输入类型为“文件”:
中间大的矩形选张图片作为填充背景:
给这3个元件设定ID,分别是:fileChose、changeIMG、fileTypeField。
主要脚本代码写在了这个元件上,通过Javascript模拟了文件选择动作。选中文本框以后,添加一个“隐藏”交互动作,当隐藏时,打开链接到URL,然后把javascript代码贴进去。
上一个教程的时候也有朋友问我,这里执行JS脚本为什么用隐藏的交互,而不是直接“载入时”。
主要是考虑复制元件使用时,JS会有冲突,所以通过主按钮做了一个刷新,具体的我在下一篇文章做扩展应用时会用到,你也可以暂时做成“载入时”交互。
这里加了一个在文件加载前识别常规图片格式的判断,如果不是PNG等,会停止加载并弹警告。
大家最喜欢的拷贝代码环节:
*前面提到浏览器安全限制,无法直接访问本地文件,所以这里是通过以下这段代码解决的:
原理就是将文件读取为DataURL,一段以data:开头的字符串。DataURL是一种将图像与html等格式的小文件直接嵌入文档的方案,这个玩法估计前端开发的同学会比较熟。
2.changeIMG,矩形记得确认设置了矩形的填充为图片。添加一个单击动作,填入代码:
同时设定移入移出的交互,切换fileChose文本框的隐藏状态,以便根据交互动作重载JS脚本。
这个是用来展示上传图片的格式的文本,非必要,没有交互脚本。
四、第四步:创建动态面板通过创建动态面板,把不需要显示的元件隐藏。
为了让元件看起来更美观,我们可以通过动态面板的可见区域的设置完成这个,把文本框拖到范围以外,并且记得把动态面板的“自适应内容”的勾去掉,这样文本框就看不到了。
以上就是关于“Axure图片上传原型怎么设计?”的全部精彩内容分享了,希望你能从中有所收获哦!如果觉得一篇文章不够尽兴,那么Axure相关文章可别错过!总而言之,学习道路,单一知识是很难成就自我全面发展的!想要全面精通擅长一个技能,那么学习也得全面!来,全面学习Axure,综合获取知识点,快速有效促成独立自主原型设计~
2024-07-20 广告