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

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

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

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

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

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

一、之一步：安排元件

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

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

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

二、第二步：配置ID

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

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

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

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

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

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

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

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

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

2. changeIMG，矩形

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

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

3. fileTypeField，矩形

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

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

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