C# aspx文件--公众号上传多张图片

公众号上传多张图片 C# aspx文件

注意！这里文件是aspx后缀，需要先配置wx.config

wx.config({
	debug: false,
	appId: '<%=WxPayConfig.APPID%>',//必填，公众号的唯一标识
	timestamp: '<%=timestamp%>',//必填，生产前面的时间戳
	nonceStr: '<%=noncestr%>',//必填生成签名的随机串
	signature: '<%=WXHelper.Signature(noncestr,timestamp)%>',
	jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getLocation']
});

H5页面排版

<div class="block_upimgs">
    <ul id="view" class="boss">
        <li class="box_addimgs">
            <input type="button" onclick="load()" multiple="multiple" accept="image/*" class='file_imgs' /> 
            <button class="btn_imgs">
                <em></em><span></span>
            </button>
            <asp:Label ID="lbltupian" runat="server" Visible="false"></asp:Label>
        </li>
    </ul>
</div>
<div class="statement">(最多上传9张照片，勿发布违法内容，违者删除！)</div>

<input type="button" id="btnRelease" name="btnRelease"  value="确 认 发 布" onclick="tijiao()"/>
<input type="hidden" id="fl" name="fl" runat="server"/>
<input type="hidden" id="xfl" name="xfl" runat="server"/>
<input type="hidden" id="pt" name="pt" runat="server"/>

 $('.html5img').val('');
var localIds = [];
var num = 0;
var Totle = 0;
//清除图片
function delpic(obj, self) {
    let a = obj.substr(obj.lastIndexOf());
    Totle--;
    localIds.splice(localIds.indexOf($(".boss #ext" + a + "").val()), 1);
    $(".boss #li_img" + a + "").remove();
    $(".boss #ext" + a + "").remove();
    var num = 1;
    $('.html5img').each(function (i) {
        if ($($('.html5img').get(i)).val()) {
            num++;
        }
    });
    if (num > 1) {
        $('#' + obj).val('');
    }
}
//上传图片
function load() {
    if (Totle >= 9) {
        //这里用到Layui，弹出信息
        layer.open({
            content: '<font style="font-size:x-large;">最多上传9张图片</font>',
            skin: 'msg',
            time: 2  // 2秒后自动关闭0
        });
        return false;
    } else {
        wx.chooseImage({
            count: 9,//数量
            sizeType: ['original', 'compressed'],//原图或压缩
            sourceType: ['album', 'camera'],//图片或相机
            success: function (res) {
                localIds = localIds.concat(res.localIds);
                if (localIds.length > 9) {
                    localIds = localIds.slice(0,9);
                }
                Totle = localIds.length;
                $(".boss .ii").remove();
                fors(localIds);
            }
        })
    }
}
function fors(res) {
    let k = 1;
    let le = res.length;
    if (Totle>9) {
        le = 9;
    }
	//这里的有点复杂，，
    for (var i = 0; i < le; i++) {
        for (var j = le - 1; j < le; j++) {
            if (j > 9) {
                layer.open({
                    content: '<font style="font-size:x-large;">最多上传9张图片</font>'
                    , skin: 'msg'
                    , time: 2  // 2秒后自动关闭
                });
                continue;

            } else {
                j++;
                //用了拼接 h5，添加到页面上
                var imgbox = $('<input runat="server" type="hidden" multiple="multiple" class="html5img ii" value=""/>');
                var li = $('<li class="ii"></li>');
                var div = $('<div class="pic"></div>');
                var a = $('<a class="hhh"></a>');
                var iii = $('<i></i>');
                var imgss = $('<img width="100%" height="100%" />');
                var del = $('<a href="javascript:;" class="del_img"  title="删除">×</a>');
                li.append(div);
                div.append(a);
                a.append(imgss);
                a.append(iii);
                li.append(del);
                li.attr('id', 'li_img' + (k + i));
                imgbox.attr('name', 'ext' + (k + i));
                imgbox.attr('id', 'ext' + (k + i));
                imgbox.attr('value', res[i]);
                imgss.attr('id', 'canvasext' + (k + i));
                imgss.attr('src', res[i]);
                del.attr('onclick', 'delpic("ext' + (k + i) + '",this);');
                $('#view').append(imgbox);
                $('#view').append(li);
            }
        }
    }
}

//此方法用于恢复提交按钮状态
function hfbtn() {
    $("#btnRelease").removeAttr("disabled");
    $("#btnRelease").removeAttr("style");
    $("#btnRelease").attr({ "value": "确 认 发 布" });
}

function tijiao() {
    img_arr.push($('#ext1').val());
    …………
    img_arr.push($('#ext9').val());

    img_arr = img_arr.filter(val => val != undefined);
    if (img_arr != null && img_arr != "" && img_arr != undefined) {
        syncUpload();
    } else {
        ooook();
    }
}
var serverIds = [];
var imgs = [];
var img_arr = [];
//将图片上传到微信服务器，为临时素材
function syncUpload() {
    if (img_arr.length == 0) {
        $.ajax({
            type: "POST",
            url: "/ajax/ssss.aspx",//获取临时素材
            data: "media_id=" + serverIds,
            dataType: "json",
            success: function (res) {
                imgs = res.data.join(",");
                ooook();
            }
        });
    } else {
        var img_it = img_arr.pop();
        wx.uploadImage({
            localId: img_it,
            success: function (res) {
                serverIds.push(res.serverId);
                syncUpload();
            }
        });
    }
}
//最后的提交
function ooook() {
    $("#btnRelease").attr({ "disabled": "disabled" });
    $("#btnRelease").attr({ "style": "background: #eee;color: #ff0000;" });
    $("#btnRelease").attr({ "value": "已生成订单，跳转中，请稍候..." });
    var can_see = '0';
    if ($("#lxdh").attr("type") == 'password') {
        can_see = '1';
    }
    var lxr = $('#lxr').val();
    var lxdh = $('#lxdh').val();
    let that = this;
    var flag = "false";

    $.ajax({
        type: "POST",
        url: "/ajax/bbbbb.aspx",
        data: "&lxr=" + lxr + "&lxdh=" + lxdh + "&imgs=" + imgs ,
        dataType: "json",
        success: function (data) {
            if (data == "1") {
                layer.open({
                    content: '<font style="font-size:x-large;">只能上传.jpeg .png .jpg 格式的图片</font>'
                    , skin: 'msg'
                    , time: 2  //2秒后自动关闭
                });
                hfbtn();
                return false;
            }
            //其它逻辑
            …………
            else {
                window.location.href = "将要跳转的页面";
            }
            return true;
        }
    });
}