基于Jquery WeUI的微信开发H5页面控件的经验总结（1）

在微信开发H5页面的时候，每每借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发，因为本人喜欢在Asp.net的Web界面上使用JQuery，所以比较倾向于使用 jQuery WeUI，本篇随笔结合官方案例和本身的项目实际开发过程的经验总结，对在H5页面开发过程当中设计到的界面控件进行逐一的分析和总结，以期可以给你们在H5页面开发过程当中提供有用的参考。

一、资源参考

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

WeUI for work：WeUI for Work (企业微信版)

 jQuery WeUI：http://jqweui.com/ 

通常状况下，咱们使用后者Jquery WeUI，在结合一些用于页面的图标和H5页面模板就能够快速开发相关的页面效果了。

  

   

 

二、界面控件的使用

1）文本控件的使用

文本控件是咱们实际项目使用最多的界面控件了，文本控件通常包括常规的Input单文本框类型和TextArea多文本框类型。

文本框的录入，通常能够把提示标题放在左侧，若有后缀信息放在右侧，以下所示。

 它的定义HTML代码，主要就是设置好布局和样式便可。

<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获取和设置对应控件的值了。

文本框是比较简单的，也遵循通用的作法，获取值的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");
        }
    }
});

因为使用了混合复杂对象的FormData，咱们异步提交的时候，须要设置 processData: false 来处理。

以上就是前端HTML+JS的界面代码部分，要完成附件的上传，还须要后台代码进行附件的处理。

 

 附件保存咱们统一采用一个独立的函数处理。

 

其实后台就是只须要经过Request.Files 的对象便可得到，而后经过咱们数据库和文件的处理，就能够实现附件的上传处理了，详细的咱们这里就再也不赘述。

因为篇幅缘由，咱们下一篇随笔继续介绍微信开发H5页面控件的各类操做。