2024年3月26日发(作者：)

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

上一篇文章讲述了定制化上传元件的视觉效果，其实在制作过程中，我曾经碰到过一

个问题，那就是“试图读取文件路径时，发现文件路径被替换为C:/fakepath/****.jpg”。

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

物理路径。

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

当我们想要在HTML里面尝试要做本地图片预览，远古时期的做法是用类似“href=”

file:///C:/Users/***.jpg””直接加载来解决，但是现在行不通了，需要一个新的办法，所

以今天我们制作一个模拟图片上传的原型。

在开始制作前，你可以看一下效果预览：

/#id=cpnfyk&p=upload

一、第一步：放置元件

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

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