天，是JavaScript回爐的第六十六天

上傳圖片和點(diǎn)擊圖片并在網(wǎng)頁(yè)上展示

//提交圖片使用的是jquery的ajax傳遞圖片，后端進(jìn)行圖片儲(chǔ)存

function picture(){

let number = arguments[0].length;

let data = new FormData();

data.append('number',number)

for(let i=0;i<number;i++){

data.append("file"+i, arguments[0][i]);

}

$.ajax({

type:'POST',

url:'http://127.0.0.1:8000/index_fontsize_addimg',

dataType: "json",

data: data,

processData: false,

contentType: false,

success: function () {

alert('提交成功')

}

})

}

//點(diǎn)擊圖標(biāo)展示輸入框

document.getElementById('input02').onclick = function(){

let arr = new Array();

document.getElementById('div01').style.display = 'block';

let text = document.querySelector("#textarea1");

let content;

let count = 0;

let fileData;

text.addEventListener("keyup", function(e) {

content = text.value;

})

document.getElementById('input01').onchange = function() {

count+=1;

fileData = this.files[0];

arr.push(fileData)

let photo = fileData.name;

if(content == undefined){

document.getElementById('textarea1').value ='['+count+'*'+photo+']';

}else{

document.getElementById('textarea1').value = content+'['+count+'*'+photo+']';

}

}

//點(diǎn)擊確定寫(xiě)入數(shù)據(jù)庫(kù)

document.getElementById('input03').onclick = function(){

let name = document.getElementById('input04').value;

let photo1 = document.getElementById('textarea1').value;

//圖片傳遞給函數(shù) picture()

picture(arr)

let url = 'http://127.0.0.1:8000/index_fontsize_add';

data={

name:name,

content:photo1

}

//ajax的函數(shù)寫(xiě)入功能

writeMysql(data,url);

}

}

//ajax的函數(shù)寫(xiě)入功能

function writeMysql(Data,Url){

let url = Url;

let data = Data;

let ajx = new XMLHttpRequest();

ajx.open('POST',url,true);

ajx.onreadystatechange = function(){

if(ajx.readyState == 4){

if(ajx.status == 200){

let content = JSON.parse(ajx.responseText)['data'][0];

//獲取值傳遞給mysqlExhibition()函數(shù)

mysqlExhibition(content)

}

}

}

ajx.send(JSON.stringify(data));

}

//該函數(shù)主要是對(duì)數(shù)據(jù)庫(kù)的內(nèi)容進(jìn)行提煉

function mysqlExhibition(exhibition){

let str = exhibition.content

let str01 = exhibition

let str1 = str.replace(/\[(.+?)\]/g,'')

let str03 = (str.match(/\*/g).length);

//把值傳遞給pic()函數(shù)

pic(str01,str1,str03)

}

//頁(yè)面展示函數(shù)，主要是創(chuàng)建圖片，這里我覺(jué)得一張博客寫(xiě)入5張圖片應(yīng)該可以了

function pic(exhibition,str1,str03){

let Url = 'http://127.0.0.1:8000/media/'

let div = document.getElementById('div03');

let p = document.createElement('p');

div.appendChild(p);

p.innerText = str1;

console.log(str03)

console.log(exhibition)

let arr = [exhibition.img0,exhibition.img1,exhibition.img2,exhibition.img3,exhibition.img4,exhibition.img5,exhibition.img6,exhibition.img7,exhibition.img8,exhibition.img9]

for(let i=0;i<str03;i++){

console.log(arr[i])

let img = document.createElement('img');

div.appendChild(img);

img.src = Url+arr[i];

img.id = 'img01';

}

}

//展示表格，博客的內(nèi)容

function selectMysql(){

let AJX = new XMLHttpRequest();

let url = 'http://127.0.0.1:8000/index_fontsize';

AJX.open('GET',url,true);

AJX.onreadystatechange = function(){

if(AJX.readyState == 4){

if(AJX.status == 200){

let number = JSON.parse(AJX.responseText)['data'].length;

let content = JSON.parse(AJX.responseText)['data']

let table = document.getElementById('table01');

for(let i=0;i<number;i++){

let tr = document.createElement('tr');

let td = document.createElement('td');

let td1 = document.createElement('td');

let td2 = document.createElement('td');

table.appendChild(tr);

tr.appendChild(td);

tr.appendChild(td1);

tr.appendChild(td2);

td.innerText = content[i].name;

td2.innerText = '查詢(xún)';

td2.style.background='blue';

}

}

}

}

AJX.send();

}

selectMysql();

//點(diǎn)擊博客查詢(xún)按鍵

document.getElementById('table01').addEventListener('click',function(e){

let data = {

name:e.path[1].children[1].innerText

}

let url = 'http://127.0.0.1:8000/index_fontsize_select';

//傳遞給writeMysql()函數(shù)

writeMysql(data,url)

})

TML編輯器粘貼word圖片，web編輯器粘貼word圖片，web富文本編輯器粘貼word，前端編輯器粘貼word內(nèi)容，前端web編輯器粘貼word，支持快捷鍵操作（Ctrl+V），

粘貼后word圖片自動(dòng)上傳到服務(wù)器中，然后自動(dòng)將圖片和文字HTML添加到編輯器中。

用戶(hù)這邊日常的編輯工作基本上都是在word中完成的，用戶(hù)把內(nèi)容編輯好后希望能夠直接一鍵（通過(guò)快捷鍵）粘貼到網(wǎng)站后臺(tái)新聞發(fā)布頁(yè)面的編輯器中，這樣能夠節(jié)省不少時(shí)間。提高工作效率，信息發(fā)布效率。

用戶(hù)發(fā)布新聞的時(shí)候是從word里面復(fù)制圖片和文字，然后將word圖文內(nèi)容粘貼到web富文本編輯器中，希望能夠?qū)ord的圖片自動(dòng)上傳到服務(wù)器中，服務(wù)器地址能夠自定義，后端的話(huà)需要支持任意開(kāi)發(fā)語(yǔ)言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于標(biāo)準(zhǔn)HTTP協(xié)議的都要支持。如果能夠不裝控件最好，

實(shí)際上裝不裝都無(wú)所謂，只要好用。

1.下載示例：

http://www.ncmem.com/webapp/wordpaster/versions.aspx

2.復(fù)制WordPaster插件目錄

3.引入插件文件

注意：不要重復(fù)引入jquery，如果您的項(xiàng)目已經(jīng)引入了jq，則不用再引入jq-1.4

4.在工具欄中增加插件按鈕

6.初始化控件

注意：

1.如果接口字段名稱(chēng)不是file，請(qǐng)配置FileFieldName。ueditor接口中使用的upfile字段

參考：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45

2.如果接口返回JSON，請(qǐng)配置ImageMatch

參考：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

3.如果接口返回的圖片地址沒(méi)有域名，請(qǐng)配置ImageUrl

參考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936

4.如果接口有權(quán)限驗(yàn)證（登陸驗(yàn)證，SESSION驗(yàn)證），請(qǐng)配置COOKIE。或取消權(quán)限驗(yàn)證。

參考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

效果

文詳細(xì)介紹了如何在Axure中創(chuàng)建一個(gè)上傳圖片列表的原型模板，包括具體的操作步驟和交互設(shè)計(jì)，對(duì)于需要在產(chǎn)品原型中實(shí)現(xiàn)圖片上傳功能的產(chǎn)品經(jīng)理和設(shè)計(jì)師來(lái)說(shuō)，這是一個(gè)非常實(shí)用的教程。閱讀本文，你將學(xué)會(huì)如何制作一個(gè)交互式的圖片上傳列表，希望對(duì)你有所幫助。

上傳圖片列表常用于許多不同類(lèi)型的應(yīng)用和系統(tǒng)中，包括社交媒體平臺(tái)、電子商務(wù)網(wǎng)站、博客和內(nèi)容管理系統(tǒng)、在線(xiàn)相冊(cè)和圖像存儲(chǔ)服務(wù)、項(xiàng)目管理工具等，發(fā)揮著重要作用，幫助用戶(hù)管理、組織和展示他們上傳的圖片，從而豐富內(nèi)容、提高用戶(hù)體驗(yàn)，并支持各種業(yè)務(wù)需求。

所以今天作者就教大家怎么在Axure制作一個(gè)上傳圖片列表的原型模板，具體效果如下所示：

一、原型效果

1、點(diǎn)擊上傳方框，打開(kāi)顯示本地資源的窗口，里面可以選擇本地的資源。

2、如果選擇的不是圖片格式，彈出彈窗提示。

3、如果選擇的是圖片格式，將圖片回顯，然后顯示下一個(gè)上傳方框。

二、原型預(yù)覽

https://axhub.im/ax9/ca3dd539f46dc856/#g=1&p=上傳圖片（列表效果2）

三、原型下載

1. 加入原型分享群后，可免費(fèi)分享該原型
2. https://weidian.com/item.html?itemID=3856417707

四、制作教程

1. 材料準(zhǔn)備

這里需要的材料很簡(jiǎn)單主要包括一個(gè)上傳框的圖片，一個(gè)文本框和一個(gè)文本標(biāo)簽。

圖片我們命名為vigopic1，文本框命名為vigotext1，文本標(biāo)簽命名為click1。

圖片默認(rèn)選擇上傳框的圖片。

文本標(biāo)簽，用于觸發(fā)后續(xù)交互。

文本框輸入類(lèi)型選擇輸入框，我們通過(guò)js代碼可以調(diào)用選擇本地圖片，選擇圖片后進(jìn)行回顯，之前在上傳圖片那章教程里面，有詳細(xì)講解，大家可以先去學(xué)習(xí)那章教程，然后再回來(lái)學(xué)習(xí)上傳之后怎么觸發(fā)繼續(xù)上傳新的圖片。

整體擺放如下圖所示，只顯示圖片，文本標(biāo)簽和文本框放置在圖片底部，用圖片遮擋著他倆。

如果想做成列表，我們需要總共上傳多少個(gè)，就復(fù)制幾個(gè)，例如朋友圈案例是最多上傳9個(gè)，那就復(fù)制多8個(gè)，總數(shù)九個(gè)，前面只有第一個(gè)默認(rèn)顯示，后面的默認(rèn)隱藏即可，然后擺放整齊就可以了，本演示案例是做了一個(gè)最多上傳12張圖片的案例，如果有需要更多的，也可以按照下面方法自行添加。

對(duì)了，因?yàn)閖s代碼是根據(jù)元件名來(lái)上傳和回顯的，所以文件名要唯一，前面第一個(gè)組合，我們把圖片命名為vigopic1，文本框命名為vigotext1，文本標(biāo)簽命名為click1；那第二個(gè)組合就要改成圖片命名為vigopic2，文本框命名為vigotext2，文本標(biāo)簽命名為click2；那第3個(gè)組合就要改成圖片命名為vigopic3，文本框命名為vigotext3，文本標(biāo)簽命名為click3……如此類(lèi)推。2. 交互制作

在原有的代碼基礎(chǔ)上，我們可以增加一個(gè)判斷，就是上傳的是否為圖片格式，常見(jiàn)的圖片格式包括png、jpg、jpeg，案例中用的是這三種格式，如果需要增加其他圖片格式，可以自行添加代碼如：

if(fileType==”image/png”||fileType==”image/jpeg”||fileType==”image/jpg”)

如果上傳不符合格式，我們用 alert代碼，調(diào)出系統(tǒng)彈窗提示即可，例如 alert( “請(qǐng)上傳圖片（格式JPG、JPEG、PNG）!”)；

如果上傳的格式符合，那就回顯圖片，這里和之前上傳圖片不同的是，回顯之后，我們要顯示下個(gè)一個(gè)上傳框，以第一個(gè)上傳框上傳回顯后為例，我們要從代碼回到axure的元件里面，這里我們需要借助文本標(biāo)簽click1，我們?cè)谖谋緲?biāo)簽鼠標(biāo)單擊時(shí)，我們用顯示的交互，將第二個(gè)組合顯示出來(lái)就可以了。

現(xiàn)在剩下的問(wèn)題就是，上傳回顯完之后，怎么觸發(fā)這個(gè)文本標(biāo)簽鼠標(biāo)單擊的事件呢？

我們可以在代碼里增加一行，用jQuery 事件 – click 方法，模擬點(diǎn)擊按鈕（或執(zhí)行點(diǎn)擊按鈕時(shí)的操作），我們要選擇Axure里名為click1的元件，相當(dāng)于選擇頁(yè)面中標(biāo)有 data-label 屬性值為 ‘click1′ 的元素，所以整行代碼是(“[data-label=’click1’]”).click;選擇頁(yè)面中標(biāo)有 data-label 屬性值為 ‘click1’ 的元素，并模擬用戶(hù)對(duì)這個(gè)元素的點(diǎn)擊，點(diǎn)擊之后就觸發(fā)上面單擊時(shí)的交互，顯示第一個(gè)組合。

組合2的話(huà)也是同一個(gè)原理，我們把圖片命名為vigopic1、文本框命名為vigotext1、文本標(biāo)簽命名為click1的目的也是為了方便后續(xù)修改，在第二個(gè)組合里的，我只需要代碼和名字里的’1’改成’2’，然后交互事件顯示組合2改成顯示組合3就可以了，改起來(lái)也非常方便。

后續(xù)的345678……組合，也是同一個(gè)道理。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。

本文由人人都是產(chǎn)品經(jīng)理作者【AI產(chǎn)品人】，微信公眾號(hào)：【Axure高保真原型】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于 CC0 協(xié)議。