Axure教程:如何实现图片上传 自动预览

访客4年前黑客资讯1067

编辑导语:许多APP都有图片上传然后自动预览成果,那么如何用Axure教程实现这个成果呢?本文作者通过实际操纵,为我们展示了整个流程,而且总结了四个步调,但愿看后可以或许对你有所辅佐。

Axure教程:如何实现图片上传 自动预览

上一篇文章报告了定制化上传元件的视觉结果,其实在建造进程中,我曾经遇到过一个问题,那就是“试图读取文件路径时,发明文件路径被替换为C:/fakepath/****.jpg”。

——这是由于欣赏器的安详机制,input file的路径时被fakepath取代,埋没了真实物理路径。

Axure凡是是用来做原型演示的,所以离线当地运行的环境较量多。

当我们想要在HTML内里实验要做当舆图片预览,远古时期的做法是用雷同“href=”file:///C:/Users/***.jpg””直接加载来办理,可是此刻行不通了,需要一个新的步伐,所以本日我们建造一个模仿图片上传的原型。

在开始建造前,你可以看一下结果预览:

Axure教程:如何实现图片上传 自动预览

一、之一步:安排元件

首先在页面上安排3个元件:1个文本框,2个矩形。

Axure教程:图片上传 - 自动预览(1)

文本框记得配置输入范例为“文件”:

Axure教程:图片上传 - 自动预览(1)

中间大的矩形选张图片作为填充配景:

Axure教程:图片上传 - 自动预览(1)

二、第二步:配置ID

给这3个元件设定ID,别离是:fileChose、changeIMG、fileTypeField。

Axure教程:图片上传 - 自动预览(1)

三、第三步:添加交互行动 1. fileChose,文本框

主要剧本代码写在了这个元件上,通过Javascript模仿了文件选择行动。选中文本框今后,添加一个“埋没”交互行动,当埋没时,打开链接到URL,然后把javascript代码贴进去。

Axure教程:图片上传 - 自动预览(1)

上一个教程的时候也有伴侣问我,这里执行 *** 剧本为什么用埋没的交互,而不是直接“载入时”。

主要是思量复制元件利用时, *** 会有斗嘴,所以通过主按钮做了一个刷新,详细的我在下一篇文章做扩展应用时会用到,你也可以临时做成“载入时”交互。

这里加了一个在文件加载前识别通例图片名目标判定,假如不是PNG等,会遏制加载并弹告诫。

各人最喜欢的拷贝代码环节:

Axure教程:如何实现图片上传 自动预览

*前面提到欣赏器安详限制,无法直接会见当地文件,所以这里是通过以下这段代码办理的:

Axure教程:图片上传 - 自动预览(1)

道理就是将文件读取为 DataURL,一段以 data: 开头的字符串。DataURL是一种将图像与 html 等名目标小文件直接嵌入文档的方案,这个玩法预计前端开拓的同学会较量熟。

2. changeIMG,矩形

记得确认配置了矩形的填充为图片。添加一个单击行动,填入代码:

同时设定移入移出的交互,切换fileChose文本框的埋没状态,以便按照交互行动重载 *** 剧本。

Axure教程:图片上传 - 自动预览(1)

3. fileTypeField,矩形

这个是用来展示上传图片的名目标文本,非须要,没有交互剧本。

四、第四步:建设动态面板

通过建设动态面板,把不需要显示的元件埋没。

相关文章

后台列表设计避坑指南(下)

后台列表设计避坑指南(下)

编辑导语:列表页是靠山界面的重要构成之一,上篇说了靠山列表设计的“搜索”设计(详情见:靠山列表设计避坑指南 上);本篇继承讲剩下的两个部门的“坑”和必坑指南,我们一起来进修一下。 列表页是组成靠山利...

产品的PoC对于创新意味着什么?

产品的PoC对于创新意味着什么?

编辑导语:PoC(Proof of Concept),即为概念提供证据。它可用于论证团队和客户的设计,答允评估和确认观念设计方案,PoC的评价大概引起规格和设计的调解。那么,产物的PoC对付创新来说,...

怎么样才能生男孩(怎么样才能科学的生出男孩)

  怎么才能怀男孩(怎么才能科学研究的长出男孩儿)由于古时候封建社会的男尊女卑观念,在我国在较长一段时间里边查验胎儿性别鉴定人流等事情不断出現,以致于如今二十一世纪时性别比例比较严重失衡,测算出来均值...

黑客帝国锡安,强森电影找一个女黑客,找黑客破解mmm登录帐号

}结构不同的测验环境,IIS+(ASP/ASPX/PHP)+(MSSQL/MYSQL),看到这边的战略,首要的测验思路: -m与-p调配运用图1 进犯者发帖VMware虚拟机软件...

cs怎么加人?cs怎么加人按哪个键

cs怎么加人?cs怎么加人按哪个键

说到cs大家肯定不陌生,当年可谓是万人空巷,现在有些玩家依旧喜欢玩这款游戏。但是有时候玩这款游戏的时候只有我们自己,这可怎么办呢?别着急,小编教你添加电脑人玩游戏 1、首先打开CS游戏,点击新建游戏...

意大利报纸讣告?意大利报纸讣告由1页半变10余页

意大利报纸讣告?意大利报纸讣告由1页半变10余页

中国经济周刊—经济网讯 据媒体报道,3月13日,有意大利网友在社交平台上传了一段视频,比较了2月9日与3月13日当地报纸上的讣告版面。2月9日的贝加莫日报约有一页半的版面为讣告,而到3月13日有整整十...