基於Jquery WeUI的微信開發H5頁面控件的經驗總結（1）

時間 2020-04-26

標籤基於 jquery weui 微信開發 h5 頁面控件經驗總結欄目 JQuery 简体版

原文原文鏈接

在微信開發H5頁面的時候，每每藉助於WeUI或者Jquery WeUI等基礎上進行界面效果的開發，因爲本人喜歡在Asp.net的Web界面上使用JQuery，所以比較傾向於使用 jQuery WeUI，本篇隨筆結合官方案例和本身的項目實際開發過程的經驗總結，對在H5頁面開發過程當中設計到的界面控件進行逐一的分析和總結，以期可以給你們在H5頁面開發過程當中提供有用的參考。javascript

一、資源參考

WeUI : https://github.com/Tencent/weuihtml

WeUI for work：WeUI for Work (企業微信版)前端

jQuery WeUI：http://jqweui.com/ java

通常狀況下，咱們使用後者Jquery WeUI，在結合一些用於頁面的圖標和H5頁面模板就能夠快速開發相關的頁面效果了。git

二、界面控件的使用

1）文本控件的使用github

文本控件是咱們實際項目使用最多的界面控件了，文本控件通常包括常規的Input單文本框類型和TextArea多文本框類型。web

文本框的錄入，通常能夠把提示標題放在左側，若有後綴信息放在右側，以下所示。ajax

它的定義HTML代碼，主要就是設置好佈局和樣式便可。數據庫

<input id="Title" name="Title" class="weui-input" type="text" placeholder="流程標題" required>

完整加上佈局的HTML代碼以下所示。json

<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獲取和設置對應控件的值了。

文本框是比較簡單的，也遵循通用的作法，獲取值的JS代碼以下所示：

var Title = $("#Title").val();

若是咱們須要判斷值是否爲空，來在保存數據以前提示用戶，那麼能夠利用以下JS代碼。

            var Title = $("#Title").val();
            if (!Title || Title == '') {
                $.toast('表單標題不能爲空', "forbidden");
                $("#Title").focus();
                return false;
            }

咱們若是須要統一對相關控件進行校驗，能夠編寫一個函數來進行統一的校驗提示處理。

        //檢查界面的輸入是否符合要求
        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獲取對應數據後，把數據賦值到控件顯示在界面上的操做以下所示。

//若是是從已有申請單過來，則加載信息
$.getJSON("/Qyh5Flow/FindApplyById?id=" + applyid, function (info) {
    if (info != null) {
        $("#Title").val(info.Title);//申請單標題
        $("#Apply_ID").val(info.ID);//修改成已有ID
    }
});

這個就是咱們常規對控件的取值和賦值操做，大多數控件處理和這個相似，所以本小節會着重介紹常規的處理方式。

二、多文本框控件和文本框計數處理

對於多文本控件，通常在界面上，咱們經過以下代碼定義。和常規單文本的樣式不一樣，這裏使用 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);//對多文本控件進行賦值

對於多文本框控件，咱們通常會在文本框的基礎上增長一個字符計數的處理，以下界面所示。

這部分的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 事件，以便在文本框內容變化的時候，實時進行文本框的計數處理，以下JS代碼所示。

//綁定字數動態顯示
$('#Note').bind('input propertychange', function () {
    var fizeNum = $(this).val().length;//獲取輸入字數
    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);
});

文本框內容變化的時候，咱們經過$(this).parent().find('.weui-textarea-counter') 這樣的DOM元素查找的方式就能夠找到對應的文本框計數的層，而後設置它的HTML或者文本進行顯示便可。

對於經過樣式來定位某個控件，是咱們常規一種較爲靈活的作法，後面也有不少這樣的處理。

如咱們須要尋找某個DIV層下面的某個對應樣式的元素，咱們也能夠用一樣的方式，以下代碼所示。

$("#DispatchReadAction .promotion-sku .sku-default").addClass("active");
$("#DispatchReadAction .promotion-sku li").unbind("click");//解除上次的綁定操做
$("#DispatchReadAction .promotion-sku li").click(function () {
    //單擊事件處理代碼...........
});

3）下拉列表控件（單選和多選）

下拉列表控件，通常用於綁定多個選項，以便從中選擇一個或者多個值。這些列表值，有固定的，也有動態從數據庫裏面獲取的，動態的通常是常規的處理。

單選和多選的下拉列表的處理都差很少，只是設置屬性不一樣罷了。

咱們先來看看默認的單選的下拉列表控件的效果，官方提供的案例以下所示。

初始化界面的HTML和常規的文本框樣式同樣。

      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="name" class="weui-label">職業</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" id="job" type="text" value="">
        </div>
      </div>

不過JS代碼就不同，JS初始化下拉列表的代碼以下所示。

$("#job").select({
  title: "選擇職業",
  items: ["法官", "醫生", "獵人", "學生", "記者", "其餘"]
});

以上是固定的列表，通常狀況下，咱們須要根據數據庫信息，動態進行綁定下拉列表的。

例如對於付款方式，若是咱們使用固定列表的方式，那麼JS初始化代碼以下所示。

var payType = ["銀行卡", "現金", "微信"];
$("#PayType").select({
    title: "選擇支付方式",
    items: payType,
    //onChange: onChangeDept,
    //onClose: onClose,
    //onOpen: onOpen
});

若是是採用數據庫字典的方式，咱們能夠經過一個自定義函數進行綁定便可。

BindDictItem("PayType", "付款方式");//綁定字典

這個BindDictItem是咱們定義的一個通用的字典獲取方式，經過字典類型綁定下拉列表的值，這裏主要使用了Ajax方式請求數據，而後遍歷數據進行添加到集合裏面，進行界面控件的綁定便可。

若是咱們想更靈活的處理，也能夠自定義一個函數進行處理，以下代碼所示，同樣的效果。

//選擇流程處理人
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的定義，這個是文本和值的兩個屬性，咱們通常在界面上顯示的是文本屬性，若是須要獲取後面的值（通常爲某個內容的ID），那麼咱們須要如何處理才能獲取到呢。

若是咱們經過常規的獲取內容方式獲取，以下所示。

var flowUser = $("#FlowUser").val(); //獲取列表的文本

那麼你會發現獲取的是列表的文本值，而不是咱們須要獲取到的ID值，那麼若是咱們須要獲取ID值，咱們能夠用如下屬性獲取便可。

var flowuserId = $("#FlowUser").attr("data-values");//獲取列表的值

默認狀況下，列表的值是單選的，若是咱們須要設置多選，只須要初始化列表控件的時候，指定爲multi爲true便可。

例如，咱們在一個流程中，若是須要會籤，那麼須要選定多個會籤的流程處理人，以下所示。

那麼就須要設置能夠多選人員了

//流程用戶
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）日期控件

日期控件也是很是常見的一個信息錄入的控件，通常咱們處理某些表單都須要默認一個日期，可讓用戶進行修改設置的。

JQuery WeUI提供了一個Calender和datetimePicker兩個不一樣的控件，二者針對不一樣的場合，不過通常來講，我傾向於使用datetimePicker，這個選擇日期起來更加方便。

咱們先來看看Calender的日期控件。

它的定義和常規的處理差很少，如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日' 來定義初始值，這樣會致使沒法解析初始值而報錯。只能經過js中設置 value 的形式來賦值，而且須要按標準形式賦值（yyyy-mm-dd 或者時間戳)
      });
       $("#date2").val(currentDate);

而對於datetimePicker控件，這也是提供了多種顯示的效果。

例如對於咱們經常使用的審批單，有時候也須要選擇默認當前的日期，讓用戶進行修改調整的。

datetimePicker控件的賦值操做和Calender不太同樣，除了設置經過val()函數來設置值，還須要設置各個列的值，不然顯示不正常的，datetimePicker控件控件說到底仍是一個picker的選擇列表控件。

例如對於上面界面的付款日期，咱們的初始化代碼以下所示。

//付款日期設置
$("#PayDate").datetimePicker({
    title: '付款日期',
    times: function () { return []; },
    parse: function (str) {
        return str.split("-");
    },
    onChange: function (picker, values, displayValues) {
        console.log(values);
    }
});
var payDate = GetCurrentDate();//獲取當前日期
$("#PayDate").val(payDate);//設置顯示值
//拆開日期年月日進行設置日期的各個列的顯示
var b = payDate.split("-");
$("#PayDate").picker("setValue", [b[0], b[1], b[2]]);

其中 GetCurrentDate 函數是咱們經常使用來獲取固然日期時間的一個函數，貼出來供參考吧。

//獲取日期獲取日期+時間的字符串
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）省市區級聯處理

省市區級聯操做，嚴格意義上來講也是一個相似日期datetimePicker控件的選擇列表，也是提供了多列操做。

地址選擇器須要引入額外的JS文件：

<script type="text/javascript" src="js/city-picker.js" charset="utf-8"></script>

省市區的地址選擇控件，能夠經過設置屬性 showDistrict 來開啓是否顯示區的列。

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）單選框和複選框

單選框和複選框都是常規的選擇出來，在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">複選列表項</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>

單選框和複選框，主要就是在塊上定義的樣式不一樣，weui-cells_radio 和 weui-cells_checkbox的差別。

或者使用相似開關的界面效果。

這個定義代碼以下所示。

    <div class="weui-cells__title">開關</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也就是定義開關的樣式的。

除了上面標準的這兩個，咱們在購物或者流程申請單須要選擇選項的時候，都涉及到多個選擇選擇其一的情景，WeUI裏面的單選框佔用界面太多內容，不是很理想，應該採用一種更爲緊湊的方式進行選擇。

相似下面的效果，纔是咱們實際常用到的選擇場景。

仿照這個，咱們在流程申請單的時候，選擇審批意見的時候，會更加美觀。

那麼以上的代碼應該如何處理呢，咱們先看看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>

這裏咱們爲了操做靈活，採用了樣式定義的方式進行處理，這個我在多文本的計數器的時候就介紹過，在這個樣式單擊的時候，咱們進行狀態的切換便可實現。

咱們看看對應 li 元素單擊的時候，觸發的JS代碼以下所示（因爲咱們是在DIV層彈出的時候才處理，避免重複綁定，使用前需解除綁定事件：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 是樣式的過濾選擇，以方便選中對應的元素進行操做；而siblings 的操做是遍歷處理，相似$.each的處理方式。

這個操做，主要就是移除全部選中的（樣式active）的狀態，而後從新設置當前選中的元素爲選中（樣式active）。

這個active樣式的選中顏色、以及效果，咱們經過樣式進行設置好便可。

這樣就能夠實現以前說的效果了

而咱們若是須要獲取選中的選項的內容，那麼經過樣式的選擇器就能夠得到的了

var action = $("#DispatchSignAction .promotion-sku .active").text();

6）圖片上傳和預覽

在實際項目上傳表單的時候，每每都須要使用附件上傳，通常狀況下是上傳圖片文件較多，而圖片每每也須要預覽進行管理，若是是維護已有記錄的編輯界面，還應該能夠實現對已有圖片的刪除操做。

那麼就這裏涉及到幾個問題：圖片上傳、圖片預覽、圖片刪除的幾個操做。

例如咱們在流程表單裏面，須要上傳附件圖片的界面以下所示。

單擊+符號，能夠繼續上傳多個圖片，而選擇圖片就立刻進行本地的圖片縮略圖預覽操做，而單擊圖片縮略圖能夠實現圖片的大圖預覽，以下所示。

下角有垃圾箱的圖片，是用來刪除圖片的（若是已經上傳的，須要刪除數據庫，若是是剛添加的，則移除本地集合便可）。

那麼這樣的處理效果，是如何實現的呢，這些一樣分爲界面的定義和JS代碼的處理操做，上傳文件還涉及到服務端後臺代碼對附件的保存處理操做。

圖片預覽層咱們在HTML放入以下定義。

    <!--圖片預覽層-->
    <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>

常規的圖片附件界面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">
                <!--預覽圖片的列表-->
                <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代碼就是常規的圖片上傳展現縮略圖、單擊縮略圖預覽圖片、刪除圖片處理操做等內容，通常狀況下，咱們直接複製到HTML界面裏面便可。

    <script>
        $(function () {
            //初始化
            initImage();//初始化圖片刪除操做
        });

        //存放文件圖片的集合
        var fileAttach = new Array();
        function initImage() {
            //預覽縮略圖模板
            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
            //圖片縮略圖元素單擊，展現圖片預覽視圖
            $imgAttach.on("click", "li", function () {
                index = $(this).index();
                category = "payment";
                imgid = $(this).attr("id");
                $galleryImg.attr("style", this.getAttribute("style"));
                $gallery.fadeIn(100);
            });

            //預覽界面單擊退出
            $gallery.on("click", function () {
                $gallery.fadeOut(100);
            });

            //刪除圖片(根據類別和序號處理)
            $(".weui-gallery__del").click(function () {
                console.log(index + ',' + category + ',' + imgid);//記錄顯示

                //若是是在服務端的圖片，確認後移除
                if (imgid != undefined && imgid != '') {
                    $.confirm("您肯定要永久刪除該圖片嗎?", "永久刪除?", function () {
                        var url = "/QYH5/DeleteAttachment";
                        var postData = {
                            id: imgid.replace(/img_/, '') //控件id去掉前綴爲真正附件ID
                        };

                        $.post(url, postData, function (json) {
                            //轉義JSON爲對象
                            var data = $.parseJSON(json);
                            if (data.Success) {
                                $.toptip("刪除成功！", 'success');

                                //在界面上找到對應控件ID，移除控件
                                RemoveImg();
                            }
                            else {
                                $.toast("操做失敗:" + data.ErrorMessage, "forbidden");
                            }
                        });
                    });
                } else {
                    RemoveImg(); //普通圖片快速移除
                };
            });

            //移除對應類別的圖片
            function RemoveImg() {
                if (category == "payment") {
                    $imgAttach.find("li").eq(index).remove();
                    fileSick.splice(index, 1);
                } else {
                    console.log("沒有對應類型");
                    //$imgPres.find("li").eq(index).remove();
                    //filePres.splice(index, 1);
                }
            };
        };
    </script>

而上面代碼主要處理新增內容的狀況下的圖片處理，通常狀況下，還須要包括編輯現有記錄的狀況下圖片的預覽狀況，對於現有的圖片列表，咱們從數據庫裏面列出，而後展現在縮略圖便可。

以下JS代碼就是處理編輯狀況下的圖片縮略圖綁定，主要注意，咱們這裏定義了一個id的規則，和附件在後臺數據庫裏面對應的ID保持必定的規則便可。

//動態處理圖片綁定
$.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，在刪除後臺附件的時候，咱們須要解析出對應的ID，以下是對ID的處理。

var postData = {
    id: imgid.replace(/img_/, '') //控件id去掉前綴爲真正附件ID
};

咱們的圖片附件，通常狀況下隨着表單其餘內容一併提交便可，可是因爲常規的文本內容和附件內容一併處理，那麼咱們須要引入FormData來存儲複雜對象，從而能夠在後臺可以接收到各類參數和附件文件信息。

//提交信息和上傳圖片
function submitCallback() {
    var formData = new FormData();//構建一個FormData存儲複雜對象
    formData.append("ID", $("#ID").val());
    formData.append("Reason", $("#Reason").val());    
    //.........省略其餘內容
    
    //加入附件圖片
    for (var i = 0; i < fileAttach.length; i++){
        formData.append("attach_" + i, fileAttach[i]);
    };

其中的 fileAttach 的文件集合就是咱們加入的文件集合。

有了這些內容，咱們就統一處理保存全部的界面錄入文本和附件信息了。

//提交表單數據和文件
var url = "/qyH5Flow/PaymentSave?userid=@ViewBag.userid";
$.ajax({
    url: url,
    type: 'post',
    processData: false,
    contentType: false,
    data: formData,
    success: function (json) {
        //轉義JSON爲對象
        var data = $.parseJSON(json);
        if (data.Success) {
            $.toast("保存成功，稍後請到列表界面查看。");
        }
        else {
            $.toast("保存失敗:" + data.ErrorMessage, "forbidden");
        }
    }
});