编辑导语：很多APP都有图片上传然后自动预览功能，那么如何用Axure教程实现这个功能呢？本文作者通过实际操作，为我们展示了整个流程，并且总结了四个步骤，希望看后能够对你有所帮助。

上一篇文章讲述了定制化上传元件的视觉效果，其实在制作过程中，我曾经碰到过一个问题，那就是“试图读取文件路径时，发现文件路径被替换为C:/fakepath/****.jpg”。

——这是由于浏览器的安全机制，input file的路径时被fakepath代替，隐藏了真实物理路径。

Axure通常是用来做原型演示的，所以离线本地运行的情况比较多。

当我们想要在HTML里面尝试要做本地图片预览，远古时期的做法是用类似“href=”file:///C:/Users/***.jpg””直接加载来解决，但是现在行不通了，需要一个新的办法，所以今天我们制作一个模拟图片上传的原型。

在开始制作前，你可以看一下效果预览：https://k4a51h.axshare.com/#id=cpnfyk&p=upload

一、第一步：放置元件

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

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

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

二、第二步：设置ID

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

三、第三步：添加交互动作