中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

很多業務系統中，都需要具有上傳文件的功能，這里做了一個模擬上傳圖片的原型，和大家分享一下，有興趣的朋友可以看下。

預覽

圖片有些失真，就將就一下看看吧，如果哪位朋友有好的轉換gif圖片的方法，可以留言告訴我，感激不盡！下面的圖才應該會更好看一些吧

一、準備元件

1、添加一個表格。表格作用是作為表頭用的，當然也可以用矩形框代替，本人比較懶，就使用表格代替了。這里就列出了上傳文件常用的幾個信息，如果需要其他的信息，可自行添加；

2、存放上傳文件的動態面板。用于存放上傳的文件的信息使用，就起名字叫“文件”吧；

3、添加中繼器。在“文件”動態面板里面添加一個中繼器，名字就叫“文件信息”?！拔募畔ⅰ敝欣^器添加六個字段，分別叫“name”、“size”、“user”、“uptime”、“cz1”、“cz2”，這六個字段分別用來存放上傳文件的名稱、大小、上傳人、上傳時間、操作(操作有兩個)，并在“文件信息”中繼器中添加五個矩形框，前四個取名叫做“名稱”、“大小”、“上傳人”、“上傳時間”，至于最后一個可以不起名字，因為它只是作為底紋用的^_^。

另外，再加入兩個文本標簽，分別起名叫“操作1”、“操作2”，且把字體設置成藍色(軟件里操作的基本都是藍色字體)；

4、存放上傳按鈕的動態面板。用于存放選擇文件、上傳及上傳提示信息的按鈕，命名為“上傳”；

5、添加文本框。在“上傳”動態面板中，添加一個文本框，用來選擇上傳文件用，命名為“選擇文件”。文本框的類型記得一定是要選擇“文件”；

6、添加按鈕。在“上傳”動態面板中，添加一個按鈕，用來上傳文件用的，命名為“上傳”；

7、添加上傳提示框。在“上傳”動態面板中，添加一個文本標簽，用來存放上傳提示的，命名為“提示信息”，并設置成隱藏；

二、添加用例

1、給“上傳”按鈕添加用例；本例中演示的是圖片的上傳，所以“上傳”按鈕就出現了三種情況：①未選擇文件；②選擇圖片文件；③選擇其他文件；

1)未選擇文件，點擊上傳時，給出提示信息。通過“上傳文件”文本框的內容是否為空去判斷；

2)選擇文件為圖片格式。

①首先判斷上傳的文件是不是圖片格式，這里列舉了常用的幾種圖片的格式，包括jpg、jpeg、png、bmp、gif。這里使用到了字符串函數substr()和lastIndexOf()，其中substr()函數是用來截取字符串的；lastIndexOf()是從字符串的后面往前查找特定的字符的。

這里的意義是從“上傳文件”文本框內容里面截取最后一個“.”后面的字符串；如果截取的字符串是“,jpg”、“.jpeg”、“.png”、“.bmp”、“.gif”中的一個，那么就滿足了條件(這里一定要注意上圖中的符合是任何而不是全部)；

②滿足條件后，第一件事肯定是要把文件上傳了，直接把這個文件的信息保存到“文件信息”中繼器中；

name：存放選中的文件的名稱。名稱是從“上傳文件”文本框中獲取的，是“\”后面的部分哦(不明白為什么的童鞋，可以先預覽一下，選擇一個文件看看就知道了)。在axure中“\”是特殊字符什么的，需要轉義一下，就是“\\”了；

size：存放上傳文件的大小。因為axure只是模擬上傳，而不是真的實現了上傳，所以并不能獲取上傳文件的大小，我們這里只是給文件大小隨便賦個值，不過如果每次上傳都是同一個值的話，感覺很不好了，所以可以用Math.random()隨機獲取一個大小，這樣就更加逼真了；

user：存放上傳人姓名的。這里只是一個單獨的上傳功能，沒有登陸人的概念，所以只能隨便寫一個名字了(如果在一個系統中，還可以直接通過變量獲取當前登陸人的姓名)；

time：存放上傳文件的時間。通過獲取當前的時間，存入即可。這里使用到了幾個日期函數Now.getFullYear()、Now.getMonth()、Now.getDate()、Now.getHours()、Now.getMinutes()、Now.getSeconds()，這幾個函數分別是獲取當前時間的年、月、日、時、分、秒。因為獲取到的月日時分秒可能是一位數字，為了顯示美觀，使用了字符串連接和截取函數，使獲取到的月日時分秒都是兩位數字；

cz1、cz2：存放操作內容的。這里保存為“預覽”和“刪除”；

設置“文件”動態面板高度；

移動“上傳”動態面板到“文件”動態面板下方。這里用到了元件的left和bottom屬性；

X：

Y：

3)如果上傳了文件，但是不是圖片格式的，給出提示信息，并把“上傳文件”文本框的內容設置成空；

2、“文件信息”中繼器添加用例。

1)顯示上傳到的文件信息。在“文件信息”中繼器中添加“每項加載時”用例，將中繼器中對應的字段賦值到中繼器中對應的字段上；

2)給“操作2”文字標簽添加用例；

①刪除選中行；

②設置“文件”動態面板尺寸為中繼器中數據行數的高度；

③移動“上傳”動態面板到“文件”動態面板下方；

X：

Y：

預覽功能暫時木辦法實現，

三、預覽

趕緊按下F5享受自己的成果吧！

PS：寫的有點亂，有什么不明白或者有更好意見的朋友，可以給我留言，共同探討^_^

本文由 @無淚 原創發布于人人都是產品經理。未經許可，禁止轉載。