整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天，是JavaScript回爐的第六十六天
上傳圖片和點擊圖片并在網頁上展示
//提交圖片使用的是jquery的ajax傳遞圖片，后端進行圖片儲存
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('提交成功')
}
})
}
//點擊圖標展示輸入框
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+']';
}
}
//點擊確定寫入數據庫
document.getElementById('input03').onclick = function(){
let name = document.getElementById('input04').value;
let photo1 = document.getElementById('textarea1').value;
//圖片傳遞給函數 picture()
picture(arr)
let url = 'http://127.0.0.1:8000/index_fontsize_add';
data={
name:name,
content:photo1
}
//ajax的函數寫入功能
writeMysql(data,url);
}
}
//ajax的函數寫入功能
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()函數
mysqlExhibition(content)
}
}
}
ajx.send(JSON.stringify(data));
}
//該函數主要是對數據庫的內容進行提煉
function mysqlExhibition(exhibition){
let str = exhibition.content
let str01 = exhibition
let str1 = str.replace(/\[(.+?)\]/g,'')
let str03 = (str.match(/\*/g).length);
//把值傳遞給pic()函數
pic(str01,str1,str03)
}
//頁面展示函數，主要是創建圖片，這里我覺得一張博客寫入5張圖片應該可以了
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';
}
}
//展示表格，博客的內容
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 = '查詢';
td2.style.background='blue';
}
}
}
}
AJX.send();
}
selectMysql();
//點擊博客查詢按鍵
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()函數
writeMysql(data,url)
})
TML編輯器粘貼word圖片，web編輯器粘貼word圖片，web富文本編輯器粘貼word，前端編輯器粘貼word內容，前端web編輯器粘貼word，支持快捷鍵操作（Ctrl+V），
粘貼后word圖片自動上傳到服務器中，然后自動將圖片和文字HTML添加到編輯器中。
用戶這邊日常的編輯工作基本上都是在word中完成的，用戶把內容編輯好后希望能夠直接一鍵（通過快捷鍵）粘貼到網站后臺新聞發布頁面的編輯器中，這樣能夠節省不少時間。提高工作效率，信息發布效率。
用戶發布新聞的時候是從word里面復制圖片和文字，然后將word圖文內容粘貼到web富文本編輯器中，希望能夠將word的圖片自動上傳到服務器中，服務器地址能夠自定義，后端的話需要支持任意開發語言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于標準HTTP協議的都要支持。如果能夠不裝控件最好，
實際上裝不裝都無所謂，只要好用。
1.下載示例：
http://www.ncmem.com/webapp/wordpaster/versions.aspx
2.復制WordPaster插件目錄
3.引入插件文件
注意：不要重復引入jquery，如果您的項目已經引入了jq，則不用再引入jq-1.4
4.在工具欄中增加插件按鈕
6.初始化控件
注意：
1.如果接口字段名稱不是file，請配置FileFieldName。ueditor接口中使用的upfile字段
參考：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
2.如果接口返回JSON，請配置ImageMatch
參考：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
3.如果接口返回的圖片地址沒有域名，請配置ImageUrl
參考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有權限驗證（登陸驗證，SESSION驗證），請配置COOKIE。或取消權限驗證。
參考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3
效果
文詳細介紹了如何在Axure中創建一個上傳圖片列表的原型模板，包括具體的操作步驟和交互設計，對于需要在產品原型中實現圖片上傳功能的產品經理和設計師來說，這是一個非常實用的教程。閱讀本文，你將學會如何制作一個交互式的圖片上傳列表，希望對你有所幫助。
上傳圖片列表常用于許多不同類型的應用和系統中，包括社交媒體平臺、電子商務網站、博客和內容管理系統、在線相冊和圖像存儲服務、項目管理工具等，發揮著重要作用，幫助用戶管理、組織和展示他們上傳的圖片，從而豐富內容、提高用戶體驗，并支持各種業務需求。
所以今天作者就教大家怎么在Axure制作一個上傳圖片列表的原型模板，具體效果如下所示：
1、點擊上傳方框，打開顯示本地資源的窗口，里面可以選擇本地的資源。
2、如果選擇的不是圖片格式，彈出彈窗提示。
3、如果選擇的是圖片格式，將圖片回顯，然后顯示下一個上傳方框。
https://axhub.im/ax9/ca3dd539f46dc856/#g=1&p=上傳圖片（列表效果2）
這里需要的材料很簡單主要包括一個上傳框的圖片，一個文本框和一個文本標簽。
圖片我們命名為vigopic1，文本框命名為vigotext1，文本標簽命名為click1。
圖片默認選擇上傳框的圖片。
文本標簽，用于觸發后續交互。
文本框輸入類型選擇輸入框，我們通過js代碼可以調用選擇本地圖片，選擇圖片后進行回顯，之前在上傳圖片那章教程里面，有詳細講解，大家可以先去學習那章教程，然后再回來學習上傳之后怎么觸發繼續上傳新的圖片。
整體擺放如下圖所示，只顯示圖片，文本標簽和文本框放置在圖片底部，用圖片遮擋著他倆。
如果想做成列表，我們需要總共上傳多少個，就復制幾個，例如朋友圈案例是最多上傳9個，那就復制多8個，總數九個，前面只有第一個默認顯示，后面的默認隱藏即可，然后擺放整齊就可以了，本演示案例是做了一個最多上傳12張圖片的案例，如果有需要更多的，也可以按照下面方法自行添加。
對了，因為js代碼是根據元件名來上傳和回顯的，所以文件名要唯一，前面第一個組合，我們把圖片命名為vigopic1，文本框命名為vigotext1，文本標簽命名為click1；那第二個組合就要改成圖片命名為vigopic2，文本框命名為vigotext2，文本標簽命名為click2；那第3個組合就要改成圖片命名為vigopic3，文本框命名為vigotext3，文本標簽命名為click3……如此類推。2. 交互制作
在原有的代碼基礎上，我們可以增加一個判斷，就是上傳的是否為圖片格式，常見的圖片格式包括png、jpg、jpeg，案例中用的是這三種格式，如果需要增加其他圖片格式，可以自行添加代碼如：
if(fileType==”image/png”||fileType==”image/jpeg”||fileType==”image/jpg”)
如果上傳不符合格式，我們用 alert代碼，調出系統彈窗提示即可，例如 alert( “請上傳圖片（格式JPG、JPEG、PNG）!”)；
如果上傳的格式符合，那就回顯圖片，這里和之前上傳圖片不同的是，回顯之后，我們要顯示下個一個上傳框，以第一個上傳框上傳回顯后為例，我們要從代碼回到axure的元件里面，這里我們需要借助文本標簽click1，我們在文本標簽鼠標單擊時，我們用顯示的交互，將第二個組合顯示出來就可以了。
現在剩下的問題就是，上傳回顯完之后，怎么觸發這個文本標簽鼠標單擊的事件呢？
我們可以在代碼里增加一行，用jQuery 事件 – click 方法，模擬點擊按鈕（或執行點擊按鈕時的操作），我們要選擇Axure里名為click1的元件，相當于選擇頁面中標有 data-label 屬性值為 ‘click1′ 的元素，所以整行代碼是(“[data-label=’click1’]”).click;選擇頁面中標有 data-label 屬性值為 ‘click1’ 的元素，并模擬用戶對這個元素的點擊，點擊之后就觸發上面單擊時的交互，顯示第一個組合。
組合2的話也是同一個原理，我們把圖片命名為vigopic1、文本框命名為vigotext1、文本標簽命名為click1的目的也是為了方便后續修改，在第二個組合里的，我只需要代碼和名字里的’1’改成’2’，然后交互事件顯示組合2改成顯示組合3就可以了，改起來也非常方便。
后續的345678……組合，也是同一個道理。
那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。
本文由人人都是產品經理作者【AI產品人】，微信公眾號：【Axure高保真原型】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
