上传文件是用户的常用操作，也是系统的必备功能之一。上传列表是系统的必要页面。您可以上传文件到系统中。在上传列表中可以查看和处理上传、上传成功和上传失败的状态。那么，使用Axure制作这样的原型效果，怎么做呢？接下来我们一起来学习吧~自学Axure，就上！精选Axure自学视频课为不同阶段朋友提供精准专业对点学习！无论0基础还是有一定基础，都可以获取专业的课程学习~
Axure制作上传列表的原型方法：
一、制作完成后应具备以下效果可以真实选择电脑里的本地文件；
选择本地文件后，获取已选中文件的名称信息；
模拟正在上传的等待效果；
可以删除已上传的文件；
上传失败后，点击上传失败文字，可以重新上传。
二、制作材料准备1.中继器内材料这个原型主要用中继器制作，所以我们需要新建一个中继器，中继器内材料包括：文件——文件图标；
蓝色矩形——用于制作等待效果的横条，圆角设置为最大值；
浅蓝色矩形——用于loading效果的背景横条，圆角设置为最大值；
文件名称——显示文件名，用文本标签制作即可；
上传状态——默认蓝色文字，默认内容为正在上传；
删除按钮——删除当前文件的图标按钮；
背景矩形——白色矩形，外部阴影为浅蓝色；
垂直线——用于分隔和美化原型。
如下所示摆放：中继器表格设置，表格内共三列：no——用于排序使用，按12345678顺序填写即可；
text——对应文本名称的文本；
state——上传状态包括上传成功、上传失败和正在上传。
2.上传按钮组合因为要实现本地上传文件、记录文件路径、获取文件名称、中继器添加行的效果，所以上传按钮不仅仅是一个按钮，它由以下4个部分组合。1）蓝色按钮——命名为upload，至于顶层，在按钮组里只看到该元件，样式可以设置美观。2）输入框——命名为file，这里我们需要利用Axure里面输入框的系统元件输入框，将输入框的输入类型设置为文本，这样鼠标点击输入框的时候，就可以弹出文件的系统弹窗了。我们把这个输入框缩小，用蓝色按钮遮挡。3）文本标签——命名为text，用于记录选择文件的路径，默认隐藏，可直接用蓝色按钮遮挡。4）文本标签——命名为click，用于上传文件后触发中继器添加行事件。三、交互设置1.中继器载入时交互添加排序——对中继器按钮no列的内容按升序的方式排列。这样做是为了后续添加新文件的时候，新文件可以排在首行的位置。2.中继器每项加载时交互设置文本——设置文件名称元件的文本值等于Item.text，即中继器内text列的值。然后我们需要分三种状态来设置，不同交互。1）如果state列的值为正在上传设置文本——设置上传状态元件的文本值等于Item.text，即中继器内text列的值，这里我们用富文本的形式，这样就可以选择设置文本的颜色为蓝色。设置尺寸——设置蓝色矩形（上传横条）的尺寸，高于它原来的高度，宽等于1。因为是正在上传，所以将蓝色横条设置为最小准备制作loading的效果。设置尺寸——再次设置蓝色矩形（loading横条）的尺寸，高于它原来的高度，宽等于灰色矩形（背景横条）的宽度，这里注意我们需要加一个动画时间案例中为2000ms，这样就实现了上传loading的效果。等待——这里我们需要等待上面蓝色矩形动画时间结束，一般等待比它的时间稍长一点，案例中我们设置等待2500ms。更新行——更新当前行state列的文字，更新为上传成功。这样就顺利完成上传loading的效果了。2）如果state列的值为上传成功设置文本——设置上传状态元件的文本值等于Item.text，即中继器内text列的值，这里我们用富文本的形式，这样就可以选择设置文本的颜色为绿色。设置尺寸——设置蓝色矩形（loading横条）的尺寸，高于它原来的高度，宽等于灰色矩形（背景横条）的宽度，这里注意不需要加动画时间，因为动画在正在上传的时候已经完成了，这里主要是默认的列表需要这样设置。3）如果state列的值为上传失败设置文本——设置上传状态元件的文本值等于Item.text，即中继器内text列的值，这里我们用富文本的形式，这样就可以选择设置文本的颜色为红色。3.上传状态文字鼠标单击时上传状态分为上传成功、正在上传和上传失败，前两者不需要处理，如果上传失败，我们想实现点击文字就重新上传的效果。更新行——更新当前行，state列的值，更新为正在上传。因为前面我们在中继器每项加载时写了正在上传的事件，所以更新行之后就会实现重新上传的效果。4.关闭按钮鼠标点击时删除行——删除当前行的文件。5.upload按钮鼠标单击时事件这部分内容涉及一些js的代码，如果没有相关基础的话，可能理解起来会有一定的难度，下面我简单讲解一下思路。首先是鼠标单击这个按钮的时候，我们click的代码触发file元件点击，这样相当于我们在点击蓝色上传按钮的时候，同时点击了file的元件，这样就可以弹出本地文件选择的弹窗。选择本地文件后，我们要执行两端的代码：将选择的文件路径名设置到text的元件里；
再次用click的代码，触发原型里click文本标签点击的事件。
后续我们会在click文本标签内添加交互，将已选择的文件名添加到中继器内。6.click元件鼠标单击时事件上面说到选择文件后会触发该元件鼠标单击时，那在鼠标单击时我们要执行一下交互。1）标记行——标记所有行。2）更新行——更新已标记的行，即更新所有行，更新no列，将他们的值改为TargetItem.no+1。这里的意思是将他们的no序号改成他们原来的值+1，这样原来是12345678的，就会变成23456789。这样做的目的就是后续我们新增行的时候，可以将最新的一行的no设为1，因为前面我们在中继器载入时设置了排序按照no的升序，所以新上传的文件就能排在第一行的位置。3）添加行——更新no列的值为1，state列的值为正在上传，text列的值为LVAR1.slice((LVAR1.lastIndexOf(‘’))+1。这里需要展开说明一下，因为我们选择文件以后，在text元件上获取到的是文件的路径，例如：C:fakepath微信截图_20211014105011.png，所以我们还要对text元件进行加工，LVAR1对应的就是text元件。通过观察，我们可以发现，文件问就是最后一个符号后面的内容，所以我们可以用lastIndexOf函数找到最后一个符号所在的位置，然后用slice从该位置+1起到最后的文本，这样就取出了文件名称。这样我们就完成了整个元件了，将它组合在一起，以后就可以直接复制或者从元件库用拖出来使用了，是不是非常好用呢？好啦，以上的内容就是“Axure怎么制作上传列表的原型？”的相关分享了，希望对你的Axure学习操作有一定的作用哦！学习Axure，一篇就学会是不大可能的，而几篇几十篇几百篇Axure文章就不一样了。学习更多Axure，Axure相关文章、问答、视频教程综合助力~axure很强大，甚至可以用他做个简单的游戏，但是假如没有思路这个工具就没用，所以思路最重要！来，专业学习Axure原型思路，快速独立上手原型制作~
怎么学Axure网站原型设计的问题
看过连载前文的都知道，在Axure中完成一个基本的交互设置其实很简答，我们只要按照提示与引导一步步的选择事件和动作，做好元件和情形（用例）的命名即可。当你熟悉了，情形的命名也可以省略了。
我们知道有些事件的发生是有前提条件的，不同的条件会导致事件发生不同的动作，这就是事务的内在逻辑。“逻辑”一词最早由古希腊学者亚里士多德提出。狭义上逻辑既指 思维的规律，也指研究思维规律的学科即逻辑学。广义上逻辑泛指规律，包括思维规律和客观规律。 逻辑包括形式逻辑与辩证逻辑，形式逻辑包括归纳逻辑与演绎逻辑，辩证逻辑包括矛盾逻辑与对称逻辑。对称逻辑是人的整体思维（包括抽象思维与具象思维）的逻辑。
当我们为事件添加第1个情形时，如果符合情形1的条件，则执行设定的交互动作；添加第2个情形时，则变成了否则这样的句式，则执行设定的交互动作，变成了与第1个情形对立的情况，即除第1个情形之外的条件下，执行情形2的动作。很多时候我们并不希望这样，比如我们希望在选择省份下拉列表时，选项中选择不同的省，下方显示该省的城市列表。这个时候就需要为省份下拉列表添加”选项改变时“事件，将各省的城市列表转换为动态面板不同的状态。在为省份下拉列表这一元件选择不同的选项时，设置动态面板显示不同的状态，将下拉列表的各项作为情形的逻辑条件。这个时候，其实我们希望每个情形的执行是并列关系，互不干扰。因此，在这里我们手动将其他情形切换为如果的逻辑句式。右击情形，选择“切换为[如果]或[否则]"。
全部： 当全部条件都满足时，才能执行设置的动作，每个条件之间是“与”的关系，需要同时成立。我们以登录为例，点击登录按钮时，我们需要判断账号、密码，只有当账户和密码都正确，才提示“登录成功”。账号和密码的条件表达式，他们之间的逻辑关系就是全部。
任何： 当其中一个条件满足时，就可以执行设置的动作，每个条件之间是“或”的关系，即只要求其中一项成立。还是以登录为例，点击登录按钮时，判断账号和密码，如果其中一个不正确，则提示“账号与密码不匹配，登录失败”。
一个完整的条件语句由表达式和运算符构成，表达式的内容可以是文本、变量值、变量值长度、元件文字、元件文字长度、选项、选中状态、面板状态、元件的可见性、元件范围、键盘按键、指针等一切可以通过外在形式表达的内容。运算符包含了算数运算符、关系运算符和逻辑运算符。
连接两个表达式的算数运算符为==和!=。前一个为赋值符号，即将符号右侧的内容赋值给左侧表达式；第二表示不相等，即运算符两侧的内容不相等。
条件表达式中间的关系运算符包含了大于（>）、小于（<）、小于等于（<=）、大于等于（>=）。代表了两侧表达式之间的大小关系，表达式的内容通常是可以量化的数值或变量。
条件表达式中，可供选择的逻辑运算符有：包含、不包含、是、不是。主要表达运算符两侧内容的包含关系和是非关系。
一个事件下可以添加多个情形。比如，你有一个下拉列表框，其中的项是不同的省份，你可以为给“选项改变时”事件添加多个不同的情形，通过不同的下拉列表项，执行不同的动作。
默认情况下，从第二个情形开始都是否则形式的语句，可以手动点击切换为如果形式的语句。在原型中，用例是从上至下按顺序执行的。我们也可以让每个满足条件的情形都被执行。要做到这一点其实很简单，右击情形，并选择“切换为[如果]或[否则]”，将否则切换为如果。
例如，在注册表单中，对每个文本输入项的内容进行单独验证。当点击注册按钮时，可以为每个文本框添加一个如果结构的条件情形，如果不符合条件，情形就动态显示不同的错误提示。
5.为事件添加第2个情形，添加逻辑条件，在条件创建弹框中，运算符左侧分别选择被选项和当前，运算符右侧分别选择选项和浙江。点击插入动作，动作列表选择”设置面板状态”，选中“城市”动态面板，面板状态切换为“浙江”，点击完成，完成动作设置。
学习axurerp可以分为以下几个阶段：
一、新手级：
是指刚刚接触原型设计，这个时期主要是打基础。先熟悉AxureRP的工作台，有哪些功能及组件，以及一些基本的操作，弄清楚每个组件是干什么用的。
在新手阶段，主要还是以熟悉为主，可以去网上找点前人总结的经验。再者就是要自己尝试着去用一遍里面的功能，可以做一些简单的页面原型，可以是没有任何交互的，也可以是带点交互的。
二、学徒级：
等到熟悉了AxureRP的所有功能之后，要开始实际应用其去设计一般的中低保真的原型了。光知道组件怎么用了还不够，还要配合交互事件，交互动作，条件判断，甚至是变量一起去实现某个交互的功能。如果说新手阶段是打基础的阶段，那么这个阶段其实就是一个融会贯通的过程，把所掌握的知识活学活用，真正的结合起来去实现一个整体的原型设计要求，这样才能掌握AxureRP的核心功能。
这个阶段的学习前期主要是模仿为主，首先要能看懂别人做的原型实例，看看人家是怎么设计的，然后依样画葫芦，自己动手做一个。
三、大师级
AxureRP自身所带的交互事件和动作已经能实现现有产品层面上的大部分交互效果，只要做基本上都可以用原型来实现。这个阶段可以试着做一些实现起来比较困难的实例，并可以尝试着开始做一些整站或者整体产品的效果，前面都大多停留在单个页面，单个实例的原型设计上，这里就要求能完成更整体的效果，出来的是一个产品的完整的原型。
最后要说明一下的就是，AxureRP只是一种原型设计工具而已，做交互设计最重要的还是想法，工具只是用来帮实现想法的。不必过于追求技术，不必过于追求视觉表现。把握好整个产品方向的同时，应专注于交互流程、页面内交互、布局结构的创新和优化。按照上面坚持下去，学习axure不在难！