在微信開發(fā)H5頁面的時候腌紧，往往借助于WeUI或者Jquery WeUI等基礎(chǔ)上進行界面效果的開發(fā)击敌，由于本人喜歡在Asp.net的Web界面上使用JQuery，因此比較傾向于使用 jQuery WeUI，本篇隨筆結(jié)合官方案例和自己的項目實際開發(fā)過程的經(jīng)驗總結(jié)淌实，對在H5頁面開發(fā)過程中設(shè)計到的界面控件進行逐一的分析和總結(jié)，以期能夠給大家在H5頁面開發(fā)過程中提供有用的參考猖腕。
1拆祈、資源參考
WeUI : https://github.com/Tencent/weui
WeUI for work：WeUI for Work (企業(yè)微信版)
jQuery WeUI：http://jqweui.com/
一般情況下，我們使用后者Jquery WeUI倘感，在結(jié)合一些用于頁面的圖標和H5頁面模板就可以快速開發(fā)相關(guān)的頁面效果了放坏。
2、界面控件的使用
1）文本控件的使用
文本控件是我們實際項目使用最多的界面控件了老玛，文本控件一般包括常規(guī)的Input單文本框類型和TextArea多文本框類型淤年。
文本框的錄入，一般可以把提示標題放在左側(cè)蜡豹，如有后綴信息放在右側(cè)麸粮，如下所示。
它的定義HTML代碼镜廉，主要就是設(shè)置好布局和樣式即可弄诲。
<input id="Title" name="Title" class="weui-input" type="text" placeholder="流程標題" required>
完整加上布局的HTML代碼如下所示。
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">流程標題</label></div>
<div class="weui-cell__bd">
<input id="Title" name="Title" class="weui-input" type="text" placeholder="流程標題" required>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">付款事由</label></div>
<div class="weui-cell__bd">
<input id="Reason" name="Reason" class="weui-input" type="text" placeholder="付款事由" required>
</div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd"><label class="weui-label">付款金額</label></div>
<div class="weui-cell__bd">
<input id="PayAmount" name="PayAmount" type="number" class="weui-input" placeholder="付款金額" required />
</div>
<div class="weui-cell__ft"><span class="weui-vcode-btn">元</span></div>
</div>
其中 weui-cells 是定義單元塊的開始娇唯，而且 weui-cell 則是一行的開始威根，而weui-cell__ft 樣式則是定義輸入信息的后綴部分，如元视乐、歲等單位可以放到后面洛搀。其他控件的布局也是遵循這樣的方式處理。
使用控件最基本佑淀，也是最重要的就是如何通過JS獲取和設(shè)置對應(yīng)控件的值了留美。
文本框是比較簡單的，也遵循通用的做法，獲取值的JS代碼如下所示：
var Title = $("#Title").val();
如果我們需要判斷值是否為空谎砾，來在保存數(shù)據(jù)之前提示用戶逢倍，那么可以利用如下JS代碼。
var Title = $("#Title").val();
if (!Title || Title == '') {
$.toast('表單標題不能為空', "forbidden");
$("#Title").focus();
return false;
}
我們?nèi)绻枰y(tǒng)一對相關(guān)控件進行校驗景图，可以編寫一個函數(shù)來進行統(tǒng)一的校驗提示處理较雕。
//檢查界面的輸入是否符合要求
function CheckData() {
var Title = $("#Title").val();
if (!Title || Title == '') {
$.toast('表單標題不能為空', "forbidden");
$("#Title").focus();
return false;
}
var Reason = $("#Reason").val();
if (!Reason || Reason == '') {
$.toast('付款事由不能為空', "forbidden");
$("#Reason").focus();
return false;
}
var PayAmount = $("#PayAmount").val();
if (!PayAmount || PayAmount == '') {
$.toast('付款金額不能為空', "forbidden");
$("#PayAmount").focus();
return false;
}
return true;
}
//保存表單
function Save() {
if (!CheckData()) {
return;
}
var flowUser = $("#FlowUser").val();
if (!flowUser || flowUser == '') {
$.toast('請選定流程處理人', "forbidden");
$("#FlowUser").focus();
return;
}
//提交信息和上傳圖片
submitCallback();
}
如果我們需要通過JS進行控件的賦值如下所示。
$("#Title").val(info.Title);//申請單標題
如果我們可以通過Ajax獲取對應(yīng)數(shù)據(jù)后挚币，把數(shù)據(jù)賦值到控件顯示在界面上的操作如下所示亮蒋。
//如果是從已有申請單過來，則加載信息
$.getJSON("/Qyh5Flow/FindApplyById?id=" + applyid, function (info) {
if (info != null) {
$("#Title").val(info.Title);//申請單標題
$("#Apply_ID").val(info.ID);//修改為已有ID
}
});
這個就是我們常規(guī)對控件的取值和賦值操作妆毕，大多數(shù)控件處理和這個類似慎玖，因此本小節(jié)會著重介紹常規(guī)的處理方式。
2笛粘、多文本框控件和文本框計數(shù)處理
對于多文本控件趁怔，一般在界面上，我們通過如下代碼定義薪前。和常規(guī)單文本的樣式不同润努，這里使用 weui-textarea 樣式。
<textarea id="Note" name="Note" class="weui-textarea" placeholder="備注信息" rows="3" style="height:100px"></textarea>
文本框的賦值示括、取值和普通單文本控件一樣铺浇，如下所示。
var note = $("#Note").val(); //獲取文本框的值
或者賦值處理
$("#Note").val(info.Note);//對多文本控件進行賦值
對于多文本框控件例诀，我們一般會在文本框的基礎(chǔ)上增加一個字符計數(shù)的處理随抠，如下界面所示。
這部分的HTML定義代碼如下所示繁涂。
<div class="weui-cells__title">
備注信息
</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea id="Note" name="Note" class="weui-textarea" placeholder="備注信息" rows="3" style="height:100px"></textarea>
<div class="weui-textarea-counter"><span>0</span>/250</div>
</div>
</div>
</div>
我們注意拱她，在其下面增加了一個樣式為 weui-textarea-counter 的層，這個我們沒有定義任何ID扔罪，我們準備通過這個樣式來定位并顯示多文本框的字符信息的秉沼。
這個weui-textarea-counter DIV層是在文本框控件的父DIV層下的一個 class="weui-textarea-counter" 的DIV，因此我們可以通過DOM的查詢查找進行處理矿酵，避免通過ID定位的方式唬复。
在頁面初始化的時候，我們綁定一個對這個文本框的 input propertychange 事件全肮，以便在文本框內(nèi)容變化的時候敞咧，實時進行文本框的計數(shù)處理，如下JS代碼所示辜腺。
//綁定字數(shù)動態(tài)顯示
$('#Note').bind('input propertychange', function () {
var fizeNum = $(this).val().length;//獲取輸入字數(shù)
if (fizeNum > 250) {//如果大于250
var char = $(this).val();
char = char.substr(0, 250);//截取字符串（前200）
$(this).val(char);
fizeNum = 250;
}
var countText = `${fizeNum}/250`;
$(this).parent().find('.weui-textarea-counter').html(countText);
});
文本框內(nèi)容變化的時候休建，我們通過$(this).parent().find('.weui-textarea-counter') 這樣的DOM元素查找的方式就可以找到對應(yīng)的文本框計數(shù)的層乍恐，然后設(shè)置它的HTML或者文本進行顯示即可。
對于通過樣式來定位某個控件测砂，是我們常規(guī)一種較為靈活的做法茵烈，后面也有很多這樣的處理。
如我們需要尋找某個DIV層下面的某個對應(yīng)樣式的元素砌些，我們也可以用同樣的方式呜投，如下代碼所示。
$("#DispatchReadAction .promotion-sku .sku-default").addClass("active");
$("#DispatchReadAction .promotion-sku li").unbind("click");//解除上次的綁定操作
$("#DispatchReadAction .promotion-sku li").click(function () {
//單擊事件處理代碼...........
});
3）下拉列表控件（單選和多選）
下拉列表控件存璃，一般用于綁定多個選項仑荐，以便從中選擇一個或者多個值。這些列表值有巧，有固定的释漆，也有動態(tài)從數(shù)據(jù)庫里面獲取的悲没，動態(tài)的一般是常規(guī)的處理篮迎。
單選和多選的下拉列表的處理都差不多，只是設(shè)置屬性不同罷了示姿。
我們先來看看默認的單選的下拉列表控件的效果甜橱，官方提供的案例如下所示。
初始化界面的HTML和常規(guī)的文本框樣式一樣栈戳。
<div class="weui-cell">
<div class="weui-cell__hd"><label for="name" class="weui-label">職業(yè)</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="job" type="text" value="">
</div>
</div>
不過JS代碼就不一樣岂傲，JS初始化下拉列表的代碼如下所示。
$("#job").select({
title: "選擇職業(yè)",
items: ["法官", "醫(yī)生", "獵人", "學(xué)生", "記者", "其他"]
});
以上是固定的列表子檀，一般情況下镊掖，我們需要根據(jù)數(shù)據(jù)庫信息，動態(tài)進行綁定下拉列表的褂痰。
例如對于付款方式亩进，如果我們使用固定列表的方式，那么JS初始化代碼如下所示缩歪。
var payType = ["銀行卡", "現(xiàn)金", "微信"];
$("#PayType").select({
title: "選擇支付方式",
items: payType,
//onChange: onChangeDept,
//onClose: onClose,
//onOpen: onOpen
});
如果是采用數(shù)據(jù)庫字典的方式归薛，我們可以通過一個自定義函數(shù)進行綁定即可。
BindDictItem("PayType", "付款方式");//綁定字典
這個BindDictItem是我們定義的一個通用的字典獲取方式匪蝙，通過字典類型綁定下拉列表的值主籍，這里主要使用了Ajax方式請求數(shù)據(jù)，然后遍歷數(shù)據(jù)進行添加到集合里面逛球，進行界面控件的綁定即可千元。
如果我們想更靈活的處理，也可以自定義一個函數(shù)進行處理颤绕，如下代碼所示幸海，一樣的效果蜡歹。
//選擇流程處理人
var flowUsers = [];
var url = '/qyh5flow/GetCorpUser';
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
flowUsers.push({
title: item.name, value: item.userid
});
});
$("#FlowUser").select({
title: "選擇流程處理人",
items: flowUsers,
});
});
我們注意到，綁定的列表里面涕烧，每項都有一個title和value的定義，這個是文本和值的兩個屬性议纯，我們一般在界面上顯示的是文本屬性瞻凤，如果需要獲取后面的值（一般為某個內(nèi)容的ID）憨攒，那么我們需要如何處理才能獲取到呢阀参。
如果我們通過常規(guī)的獲取內(nèi)容方式獲取，如下所示蛛壳。
var flowUser = $("#FlowUser").val(); //獲取列表的文本
那么你會發(fā)現(xiàn)獲取的是列表的文本值杏瞻，而不是我們需要獲取到的ID值捞挥，那么如果我們需要獲取ID值忧吟，我們可以用以下屬性獲取即可溜族。
var flowuserId = $("#FlowUser").attr("data-values");//獲取列表的值
默認情況下煌抒，列表的值是單選的，如果我們需要設(shè)置多選耳奕，只需要初始化列表控件的時候屋群，指定為multi為true即可芍躏。
例如对竣，我們在一個流程中，如果需要會簽吕晌，那么需要選定多個會簽的流程處理人睛驳，如下所示乏沸。
那么就需要設(shè)置可以多選人員了
//流程用戶
var flowUsers = [];
var url = '/qyh5flow/GetCorpUser';
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
flowUsers.push({
title: item.name, value: item.userid
});
});
$("#txtSelectSignUser").select({
title: "選擇會簽人員",
items: flowUsers,
multi: true,
//min: 2,
//max: 3,
});
});
4）日期控件
日期控件也是非常常見的一個信息錄入的控件蹬跃，一般我們處理某些表單都需要默認一個日期蝶缀，可以讓用戶進行修改設(shè)置的扼劈。
JQuery WeUI提供了一個Calender和datetimePicker兩個不同的控件骑冗，兩者針對不同的場合，不過一般來說巧涧，我傾向于使用datetimePicker谤绳，這個選擇日期起來更加方便缩筛。
我們先來看看Calender的日期控件瞎抛。
它的定義和常規(guī)的處理差不多胎撤，如HTML代碼如下所示伤提。
<div class="weui-cell">
<div class="weui-cell__hd"><label for="date" class="weui-label">日期</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="date" type="text">
</div>
</div>
它的JS初始化代碼如下所示飘弧。
$("#date").calendar({
onChange: function (p, values, displayValues) {
console.log(values, displayValues);
}
});
var currentDate = '2020-03-22';
console.log(currentDate);
$("#date2").calendar({
value: [currentDate],
dateFormat: 'yyyy年mm月dd日' // 自定義格式的時候次伶，不能通過 input 的value屬性賦值 '2016年12月12日' 來定義初始值冠王，這樣會導(dǎo)致無法解析初始值而報錯柱彻。只能通過js中設(shè)置 value 的形式來賦值哟楷，并且需要按標準形式賦值（yyyy-mm-dd 或者時間戳)
});
$("#date2").val(currentDate);
而對于datetimePicker控件卖擅，這也是提供了多種顯示的效果惩阶。
例如對于我們常用的審批單断楷，有時候也需要選擇默認當(dāng)前的日期，讓用戶進行修改調(diào)整的舞痰。
datetimePicker控件的賦值操作和Calender不太一樣匀奏，除了設(shè)置通過val()函數(shù)來設(shè)置值娃善，還需要設(shè)置各個列的值聚磺，否則顯示不正常的瘫寝，datetimePicker控件控件說到底還是一個picker的選擇列表控件焕阿。
例如對于上面界面的付款日期暮屡，我們的初始化代碼如下所示褒纲。
//付款日期設(shè)置
$("#PayDate").datetimePicker({
title: '付款日期',
times: function () { return []; },
parse: function (str) {
return str.split("-");
},
onChange: function (picker, values, displayValues) {
console.log(values);
}
});
var payDate = GetCurrentDate();//獲取當(dāng)前日期
$("#PayDate").val(payDate);//設(shè)置顯示值
//拆開日期年月日進行設(shè)置日期的各個列的顯示
var b = payDate.split("-");
$("#PayDate").picker("setValue", [b[0], b[1], b[2]]);
其中 GetCurrentDate 函數(shù)是我們常用來獲取當(dāng)然日期時間的一個函數(shù)衫嵌，貼出來供參考吧楔绞。
//獲取日期獲取日期+時間的字符串
function GetCurrentDate(hasTime) {
var d = new Date();
var year = d.getFullYear();
var month = change(d.getMonth() + 1);
var day = change(d.getDate());
var hour = change(d.getHours());
var minute = change(d.getMinutes());
var second = change(d.getSeconds());
function change(t) {
if (t < 10) {
return "0" + t;
} else {
return t;
}
}
var time = year + '-' + month + '-' + day;
if (hasTime) {
time += ' ' + hour + ':' + minute + ':' + second;
}
return time;
}
**5）****省市區(qū)級聯(lián)處理******
省市區(qū)級聯(lián)操作墓律，嚴格意義上來說也是一個類似日期datetimePicker控件的選擇列表，也是提供了多列操作帕棉。
地址選擇器需要引入額外的JS文件：
<script type="text/javascript" src="js/city-picker.js" charset="utf-8"></script>
省市區(qū)的地址選擇控件，可以通過設(shè)置屬性 showDistrict 來開啟是否顯示區(qū)的列即纲。
HTML代碼定義代碼和其他控件類似低斋。
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">籍貫</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="NativePlace" type="text" placeholder="籍貫">
</div>
</div>
JS的初始化代碼如下所示膊畴。
$("#NativePlace").cityPicker({
title: "選擇籍貫",
showDistrict: false,
onChange: function (picker, values, displayValues) {
//console.log(values, displayValues);
}
});
**6）****單選框和復(fù)選框******
單選框和復(fù)選框都是常規(guī)的選擇出來唇跨，在WeUI里面也定義了這兩個控件的基本樣式改橘，一般情況下唧龄，參考使用即可既棺。
以上定義代碼如下所示丸冕。
<div class="weui-cells__title">單選列表項</div>
<div class="weui-cells weui-cells_radio">
<label class="weui-cell weui-check__label" for="x11">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
<input type="radio" class="weui-check" name="radio1" id="x11">
<span class="weui-icon-checked"></span>
</div>
</label>
<label class="weui-cell weui-check__label" for="x12">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
<input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
<span class="weui-icon-checked"></span>
</div>
</label>
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
</div>
<div class="weui-cells__title">復(fù)選列表項</div>
<div class="weui-cells weui-cells_checkbox">
<label class="weui-cell weui-check__label" for="s11">
<div class="weui-cell__hd">
<input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealt for u.</p>
</div>
</label>
<label class="weui-cell weui-check__label" for="s12">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox1" class="weui-check" id="s12">
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealicient for u.</p>
</div>
</label>
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
</div>
單選框和復(fù)選框诅迷，主要就是在塊上定義的樣式不同罢杉，weui-cells_radio 和 weui-cells_checkbox的差異滩租。
或者使用類似開關(guān)的界面效果律想。
這個定義代碼如下所示著洼。
<div class="weui-cells__title">開關(guān)</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_switch">
<div class="weui-cell__bd">標題文字</div>
<div class="weui-cell__ft">
<input class="weui-switch" type="checkbox">
</div>
</div>
<div class="weui-cell weui-cell_switch">
<div class="weui-cell__bd">兼容IE Edge的版本</div>
<div class="weui-cell__ft">
<label for="switchCP" class="weui-switch-cp">
<input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked">
<div class="weui-switch-cp__box"></div>
</label>
</div>
</div>
</div>
這個樣式weui-cell_switch 和weui-switch也就是定義開關(guān)的樣式的身笤。
除了上面標準的這兩個展鸡，我們在購物或者流程申請單需要選擇選項的時候莹弊，都涉及到多個選擇選擇其一的情景响迂，WeUI里面的單選框占用界面太多內(nèi)容蔗彤，不是很理想然遏，應(yīng)該采用一種更為緊湊的方式進行選擇待侵。
類似下面的效果秧倾，才是我們實際經(jīng)常使用到的選擇場景那先。
仿照這個，我們在流程申請單的時候勋又，選擇審批意見的時候，會更加美觀惯驼。
那么以上的代碼應(yīng)該如何處理呢祟牲，我們先看看HTML定義代碼
<div class="wy-media-box2 weui-media-box_text" style="margin:0;">
<div class="weui-media-box_appmsg">
<div class="wy-media-box__title"><span class="promotion-label-tit">【審批意見】</span></div>
<div class="weui-media-box__bd">
<div class="promotion-sku clear">
<ul>
<li class="sku-default"><a href="javascript:;">批準申請</a></li>
<li><a href="javascript:;">退回擬稿人重新處理</a></li>
<li><a href="javascript:;">退回上一步處理</a></li>
</ul>
</div>
</div>
</div>
</div>
這里我們?yōu)榱瞬僮黛`活议惰，采用了樣式定義的方式進行處理言询，這個我在多文本的計數(shù)器的時候就介紹過运杭，在這個樣式單擊的時候，我們進行狀態(tài)的切換即可實現(xiàn)虱咧。
我們看看對應(yīng) li 元素單擊的時候腕巡，觸發(fā)的JS代碼如下所示（由于我們是在DIV層彈出的時候才處理逸雹，避免重復(fù)綁定梆砸，使用前需解除綁定事件：unbind("click") ）帖世。
//選項變化
$("#DispatchReadAction .promotion-sku .sku-default").addClass("active");
$("#DispatchReadAction .promotion-sku li").unbind("click");//解除上次的綁定操作
$("#DispatchReadAction .promotion-sku li").click(function () {
$(this).addClass("active").siblings("li").removeClass("active");
var action = $(this).text();
console.log(action); //測試
//console.log($("#DispatchSignAction .promotion-sku .active").text());//測試選中值
//................
});
其中 #DispatchReadAction 是DIV層的定位方式 .promotion-sku .sku-default 和 .promotion-sku li 是樣式的過濾選擇，以方便選中對應(yīng)的元素進行操作哪轿；而siblings 的操作是遍歷處理窃诉，類似$.each的處理方式飘痛。
這個操作车柠，主要就是移除所有選中的（樣式active）的狀態(tài)竹祷，然后重新設(shè)置當(dāng)前選中的元素為選中（樣式active）溶褪。
這個active樣式的選中顏色猿妈、以及效果，我們通過樣式進行設(shè)置好即可俯抖。
這樣就可以實現(xiàn)之前說的效果了
而我們?nèi)绻枰@取選中的選項的內(nèi)容，那么通過樣式的選擇器就可以獲得的了
var action = $("#DispatchSignAction .promotion-sku .active").text();
**6）******圖片上傳和預(yù)覽****
在實際項目上傳表單的時候柬祠，往往都需要使用附件上傳漫蛔，一般情況下是上傳圖片文件較多，而圖片往往也需要預(yù)覽進行管理毯盈，如果是維護已有記錄的編輯界面奶镶，還應(yīng)該可以實現(xiàn)對已有圖片的刪除操作厂镇。
那么就這里涉及到幾個問題：圖片上傳、圖片預(yù)覽迄靠、圖片刪除的幾個操作掌挚。
例如我們在流程表單里面吠式，需要上傳附件圖片的界面如下所示特占。
單擊+符號，可以繼續(xù)上傳多個圖片懊纳，而選擇圖片就馬上進行本地的圖片縮略圖預(yù)覽操作，而單擊圖片縮略圖可以實現(xiàn)圖片的大圖預(yù)覽身弊，如下所示阱佛。
下角有垃圾箱的圖片，是用來刪除圖片的（如果已經(jīng)上傳的戴而，需要刪除數(shù)據(jù)庫凑术，如果是剛添加的，則移除本地集合即可）所意。
那么這樣的處理效果淮逊，是如何實現(xiàn)的呢催首，這些同樣分為界面的定義和JS代碼的處理操作泄鹏，上傳文件還涉及到服務(wù)端后臺代碼對附件的保存處理操作郎任。
圖片預(yù)覽層我們在HTML放入如下定義。
<!--圖片預(yù)覽層-->
<div class="weui-gallery" id="gallery">
<span class="weui-gallery__img" id="galleryImg" style="width:auto"></span>
<div class="weui-gallery__opr">
<a href="javascript:" class="weui-gallery__del">
<i class="weui-icon-delete weui-icon_gallery-delete"></i>
</a>
</div>
</div>
常規(guī)的圖片附件界面HTML代碼如下所示备籽。
<div class="weui-cells__title">附件</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd weui-cell_primary">
<div class="weui-uploader">
<!--預(yù)覽圖片的列表-->
<ul class="weui-uploader__files" id="imgAttach">
</ul>
<div class="weui-uploader__input-box">
<!--上傳圖片附件控件-->
<input id="uploaderAttach" class="weui-uploader__input" type="file" accept="image/*" multiple="">
</div>
</div>
</div>
</div>
</div>
我們在上傳圖片的附近舶治，放置了一個ul的界面元素，用來承載圖片文件縮略圖顯示的车猬，定義ID為 imgAttach霉猛。
下面的JS代碼就是常規(guī)的圖片上傳展示縮略圖、單擊縮略圖預(yù)覽圖片珠闰、刪除圖片處理操作等內(nèi)容惜浅，一般情況下，我們直接復(fù)制到HTML界面里面即可伏嗜。
<script>
$(function () {
//初始化
initImage();//初始化圖片刪除操作
});
//存放文件圖片的集合
var fileAttach = new Array();
function initImage() {
//預(yù)覽縮略圖模板
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderAttach = $("#uploaderAttach"),
$imgAttach = $("#imgAttach");
//圖片上傳坛悉，加入縮略圖標
$uploaderAttach.on("change", function (e) {
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
fileAttach.push(file);//加入集合
if (url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
$imgAttach.append($(tmpl.replace('#url#', src)));
}
});
var index; //第幾張圖片
var category;//那個類別
var imgid;//圖片ID
//圖片縮略圖元素單擊，展示圖片預(yù)覽視圖
$imgAttach.on("click", "li", function () {
index = $(this).index();
category = "payment";
imgid = $(this).attr("id");
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
//預(yù)覽界面單擊退出
$gallery.on("click", function () {
$gallery.fadeOut(100);
});
//刪除圖片(根據(jù)類別和序號處理)
$(".weui-gallery__del").click(function () {
console.log(index + ',' + category + ',' + imgid);//記錄顯示
//如果是在服務(wù)端的圖片阅仔，確認后移除
if (imgid != undefined && imgid != '') {
$.confirm("您確定要永久刪除該圖片嗎?", "永久刪除?", function () {
var url = "/QYH5/DeleteAttachment";
var postData = {
id: imgid.replace(/img_/, '') //控件id去掉前綴為真正附件ID
};
$.post(url, postData, function (json) {
//轉(zhuǎn)義JSON為對象
var data = $.parseJSON(json);
if (data.Success) {
$.toptip("刪除成功吹散！", 'success');
//在界面上找到對應(yīng)控件ID，移除控件
RemoveImg();
}
else {
$.toast("操作失敗:" + data.ErrorMessage, "forbidden");
}
});
});
} else {
RemoveImg(); //普通圖片快速移除
};
});
//移除對應(yīng)類別的圖片
function RemoveImg() {
if (category == "payment") {
$imgAttach.find("li").eq(index).remove();
fileSick.splice(index, 1);
} else {
console.log("沒有對應(yīng)類型");
//$imgPres.find("li").eq(index).remove();
//filePres.splice(index, 1);
}
};
};
</script>
而上面代碼主要處理新增內(nèi)容的情況下的圖片處理，一般情況下，還需要包括編輯現(xiàn)有記錄的情況下圖片的預(yù)覽情況九榔，對于現(xiàn)有的圖片列表膳沽，我們從數(shù)據(jù)庫里面列出，然后展示在縮略圖即可。
如下JS代碼就是處理編輯情況下的圖片縮略圖綁定，主要注意，我們這里定義了一個id的規(guī)則浊猾，和附件在后臺數(shù)據(jù)庫里面對應(yīng)的ID保持一定的規(guī)則即可。
//動態(tài)處理圖片綁定
$.getJSON("/Qyh5Flow/GetImageList2?attachGuid=" + info.AttachGUID, function (data) {
$.each(data, function (i, item) {
$("#imgAttach").append(`<img class='weui-uploader__file' src='${item.Text}' id='img_${item.Value}'/>`);
});
});
這個ID热鞍，在刪除后臺附件的時候葫慎，我們需要解析出對應(yīng)的ID，如下是對ID的處理薇宠。
var postData = {
id: imgid.replace(/img_/, '') //控件id去掉前綴為真正附件ID
};
我們的圖片附件偷办，一般情況下隨著表單其他內(nèi)容一并提交即可，但是由于常規(guī)的文本內(nèi)容和附件內(nèi)容一并處理澄港，那么我們需要引入FormData來存儲復(fù)雜對象椒涯，從而可以在后臺能夠接收到各種參數(shù)和附件文件信息。
//提交信息和上傳圖片
function submitCallback() {
var formData = new FormData();//構(gòu)建一個FormData存儲復(fù)雜對象
formData.append("ID", $("#ID").val());
formData.append("Reason", $("#Reason").val());
//.........省略其他內(nèi)容
//加入附件圖片
for (var i = 0; i < fileAttach.length; i++){
formData.append("attach_" + i, fileAttach[i]);
};
其中的 fileAttach 的文件集合就是我們加入的文件集合回梧。
有了這些內(nèi)容废岂，我們就統(tǒng)一處理保存所有的界面錄入文本和附件信息了祖搓。
//提交表單數(shù)據(jù)和文件
var url = "/qyH5Flow/PaymentSave?userid=@ViewBag.userid";
$.ajax({
url: url,
type: 'post',
processData: false,
contentType: false,
data: formData,
success: function (json) {
//轉(zhuǎn)義JSON為對象
var data = $.parseJSON(json);
if (data.Success) {
$.toast("保存成功，稍后請到列表界面查看湖苞。");
}
else {
$.toast("保存失敗:" + data.ErrorMessage, "forbidden");
}
}
});
由于使用了混合復(fù)雜對象的FormData拯欧，我們異步提交的時候，需要設(shè)置 processData: false 來處理袒啼。
以上就是前端HTML+JS的界面代碼部分哈扮，要完成附件的上傳，還需要后臺代碼進行附件的處理蚓再。
附件保存我們統(tǒng)一采用一個獨立的函數(shù)處理。
其實后臺就是只需要通過Request.Files 的對象即可獲得包各，然后通過我們數(shù)據(jù)庫和文件的處理摘仅，就可以實現(xiàn)附件的上傳處理了，詳細的我們這里就不再贅述问畅。
由于篇幅原因娃属，我們下一篇隨筆繼續(xù)介紹微信開發(fā)H5頁面控件的各種操作。
