WEUI.Uploader

微信上传控件

最需要注意的一点就是：

只使用微信的JS和CSS 做上传 你没法得到数据里面保存文件的id

微信默认前台的id是 上传顺序 1 2  3   4 这样 和你数据库的id不通

所以需要自己通过上传成功返回的文件id给加到html里面

最后有提到

先上效果图：

前言

微信常规实现的是上传到微信服务器然后再通过微信的接口显示或者隐藏

我这里由于只是要微信的样式用来做H5 webapp 所以引用微信的很多js.config 一概没用

我的实现步奏

下载了weui里面的2个例子一个是原生的css 一个是原生扩展js

这里下载

官方css：

https://github.com/weui/weui

官方js：

https://github.com/weui/weui.js/

然后以css  dist里面的demo为主例子

2个对比引用出来的代码：

Index页面：

@{
    Layout = "~/Views/Shared/_LayoutClear.cshtml";
}
@section pageHeadCSS {
    <link href="~/Resource/Plugins/BootStrap/css/bootstrap-font.min.css" rel="stylesheet" />
    <link href="~/Resource/Plugins/WEUI-CSS/dist/style/weui.min.css" rel="stylesheet" />
    <link href="~/Resource/Plugins/WEUI-CSS/dist/example/example.css" rel="stylesheet" />
}


<div class="container" id="container"></div>






<script type="text/html" id="tpl_home">
    @Html.Action("Main", "NewProblem")
</script>




@section pageHeadJS {
    <script src="~/Resource/Plugins/WEUI-CSS/dist/example/zepto.min.js"></script>
    <script src="~/Resource/Plugins/WEUI-JS/dist/weui.min.js"></script>
    <script src="~/Resource/Plugins/WEUI-CSS/dist/example/example.js"></script>
    <script src="~/Resource/Common/customer.common.js"></script>
}

然后Main里面的代码

<div class="page">
    @*隐藏域部分*@
    <input type="hidden" id="hid_id" value="@ViewBag.ID" />
    <input type="hidden" id="hid_backurl" value="@ViewBag.BackUrl" />




    @*主题页面部分*@
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            @*头部*@
            <div class="weui-navbar">
                <table style="height: 50px; width: 100%; background-color: #505050;">
                    <tr>
                        <td style="padding-left:5px;">
                            <a href="javascript:;" id="backBtn" style="color: white; "><i style="cursor: pointer;" class="glyphicon glyphicon-arrow-left"></i>&nbsp;新建问题</a>
                        </td>
                        <td style="width:40px;">
                            @*<a id="searchButton" href="javascript:void(0)">
                                    <i style="color:white;cursor:pointer;" class="glyphicon glyphicon-search"></i>
                                </a>*@
                        </td>
                        <td style="width:30px;">
                            @*<i style="color: white; cursor: pointer;" class="glyphicon glyphicon-plus"></i>*@
                        </td>
                    </tr>
                </table>
            </div>
            @*中部*@
            <div class="weui-tab__panel">


                <div class="weui-cells__title">联系电话</div>
                <div class="weui-cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" value="@ViewBag.Phone" id="txt_phone" type="number" pattern="[0-9]*" placeholder="请输入联系电话" />
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">问题分类</div>
                <div class="weui-cells" id="wttypebtn">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input type="hidden" id="hid_wttypeid" />
                            <input class="weui-input" id="txt_wttype" type="text" readonly placeholder="请选择问题分类" />
                        </div>
                        <div class="weui-cell__ft">
                            <i style="cursor: pointer;" class="glyphicon glyphicon-chevron-down"></i>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">负责人</div>
                <div class="weui-cells" id="wtfzrbtn">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input type="hidden" id="hid_wtfzrid" />
                            <input class="weui-input" id="txt_wtfzr" type="text" readonly placeholder="请选择负责人" />
                        </div>
                        <div class="weui-cell__ft">
                            <i style="cursor: pointer;" class="glyphicon glyphicon-chevron-down"></i>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">期望解决日期</div>
                <div class="weui-cells" id="qwdatebtn">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" id="txt_qwDate" type="text" readonly placeholder="年月日" />
                        </div>
                        <div class="weui-cell__ft">
                            <i style="cursor: pointer;" class="glyphicon glyphicon-chevron-down"></i>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">问题描述</div>
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <textarea id="txt_des" class="weui-textarea" placeholder="" rows="3"></textarea>
                            <div class="weui-textarea-counter"><span id="des_count">0</span>/1000</div>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">附件上传(只支持图片)</div>
                <div class="weui-cells weui-cells_form" id="uploader">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <div class="weui-uploader">
                                <div class="weui-uploader__hd">
                                    <p class="weui-uploader__title">图片列表</p>
                                    <div class="weui-uploader__info">
                                        <span id="uploadCount">0</span>/10
                                    </div>
                                </div>
                                <div class="weui-uploader__bd">
                                    <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                                    <div class="weui-uploader__input-box">
                                        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" capture="camera" multiple="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-btn-area" style="height:40px;">
                    
                </div>


            </div>
            @*底部*@
            <div class="weui-tabbar">
                <a class="weui-btn  weui-btn_primary"  style="width:98%;" href="javascript:" id="submitBtn">提交</a>
            </div>
        </div>
    </div>


</div>


@*数据加载中*@
<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据处理中</p>
    </div>
</div>


<script type="text/javascript">
    $(function () {


        //返回按钮
        $("#backBtn").on('click', function () {
            window.location.href = $("#hid_backurl").val();
        });


        //问题分类的数据
        var wttypeData = [];
        //问题负责人
        var wtfzrData = [];


        //加载问题分类
        $('#loadingToast').fadeIn(100);
        $.post("/NewProblem/GetTypeList", { flag: new Date().getTime() }, function (data) {
            var dataObj = eval("(" + data + ")");
            wttypeData = $.fn.arrayToTree(dataObj, "id", "pid");
            $('#loadingToast').fadeOut(100);
        });
        //问题分类
        $('#wttypebtn').on('click', function () {
            weui.picker(wttypeData, {
                depth: 2,
                defaultValue: [0, 0],
                onChange: function onChange(result) {
                    console.log(result);
                },
                onConfirm: function onConfirm(result) {
                    $("#hid_wttypeid").val(result[1].value);
                    $("#txt_wttype").val(result[1].label);


                    //加载问题负责人
                    $('#loadingToast').fadeIn(100);
                    //清空负责人
                    $("#hid_wtfzrid").val("");
                    $("#txt_wtfzr").val("");
                    $.post("/NewProblem/GetPerson", { typeID: result[1].value, flag: new Date().getTime() }, function (data) {
                        wtfzrData = eval("(" + data + ")");
                        $('#loadingToast').fadeOut(100);
                    });
                }
            });
        });
        //问题负责人
        $('#wtfzrbtn').on('click', function () {
            weui.picker(wtfzrData, {
                //defaultValue: [8],
                className: 'custom-classname',
                onChange: function onChange(result) {
                    console.log(result);
                },
                onConfirm: function onConfirm(result) {
                    $("#hid_wtfzrid").val(result[0].value);
                    $("#txt_wtfzr").val(result[0].label);
                }
            });
        });


        //期望日期
        $('#qwdatebtn').on('click', function () {
            weui.datePicker({
                start: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + (new Date().getDate()),
                //end: new Date().getFullYear(),
                defaultValue: [new Date().getFullYear(), (new Date().getMonth() + 1), new Date().getDate()],
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    $("#txt_qwDate").val(result[0].label + result[1].label + result[2].label);
                }
            });
        });




        //问题描述
        $("#txt_des").on('input', function () {
            if (this.value.length >= 1001) {
                $("#txt_des").val(this.value.substring(0, 1000));
                return;
            }
            $("#des_count").text(this.value.length);
        });


        //图片上传
        var uploadCount = 0, uploadList = [],uploadSuccessCount=0;
        var uploadCountDom = document.getElementById("uploadCount");
        weui.uploader('#uploader', {
            url: '/NewProblem/FileUpload',
            auto: true,
            type: 'file',
            fileVal: 'fileVal',
            compress: {
                width: 1600,
                height: 1600,
                quality: .8
            },
            onBeforeQueued: function onBeforeQueued(files) {
                if (["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0) {
                    weui.alert('请上传图片');
                    return false;
                }
                if (this.size > 10 * 1024 * 1024) {
                    weui.alert('请上传不超过10M的图片');
                    return false;
                }
                if (files.length > 10) {
                    // 防止一下子选中过多文件
                    weui.alert('最多只能上传10张图片，请重新选择');
                    return false;
                }
                if (uploadCount + 1 > 10) {
                    weui.alert('最多只能上传10张图片');
                    return false;
                }


                ++uploadCount;
                uploadCountDom.innerHTML = uploadCount;
            },
            onQueued: function onQueued() {
                uploadList.push(this);
                console.log(this);
            },
            onBeforeSend: function onBeforeSend(data, headers) {
                $("#submitBtn").addClass("weui-btn_disabled");
                $('#loadingToast').fadeIn(100);
                console.log(this, data, headers);
                // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
                // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部


                // return false; // 阻止文件上传
            },
            onProgress: function onProgress(procent) {
                console.log(this, procent);
            },
            onSuccess: function onSuccess(ret) {
                if (ret.Result == true)
                {
                    uploadSuccessCount++;
                    if (uploadSuccessCount == uploadCount)
                    {
                        $('#loadingToast').fadeOut(100);
                        $("#submitBtn").removeClass("weui-btn_disabled");
                    }
                }
                var uploadID = this.id;
                $("#uploaderFiles li").each(function(){
                    if ($(this).attr("data-id") == uploadID)
                    {
                        $(this).attr("data-fid", ret.OtherData);
                        //alert($(this).attr("data-fid"));
                    }
                });
                console.log(this, ret);
            },
            onError: function onError(err) {
                console.log(this, err);
            }
        });


        // 缩略图预览
        document.querySelector('#uploaderFiles').addEventListener('click', function (e) {
            var target = e.target;


            while (!target.classList.contains('weui-uploader__file') && target) {
                target = target.parentNode;
            }
            if (!target) return;


            var url = target.getAttribute('style') || '';
            var id = target.getAttribute('data-id');


            if (url) {
                url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');
            }
            var gallery = weui.gallery(url, {
                className: 'custom-name',
                onDelete: function onDelete() {
                    weui.confirm('确定删除该图片？', function () {
                        --uploadCount;
                        uploadCountDom.innerHTML = uploadCount;


                        for (var i = 0, len = uploadList.length; i < len; ++i) {
                            var file = uploadList[i];
                            if (file.id == id) {
                                $("#uploaderFiles li").each(function () {
                                    if ($(this).attr("data-id") == id) {
                                        //$(this).attr("data-fid", ret.OtherData);
                                        var fid = $(this).attr("data-fid");
                                        $('#loadingToast').fadeIn(100);
                                        var param = {};
                                        param.flag = new Date().getTime();
                                        param.ID = fid;
                                        $.post("/NewProblem/DelTAttachment", param, function (data) {
                                            $('#loadingToast').fadeOut(100);
                                        });
                                    }
                                });
                                file.stop();
                                break;
                            }
                        }
                        target.remove();
                        gallery.hide();
                    });
                }
            });
        });


    });
</script>

重点讲解上传附件那块：

附件的代码官方例子有直接拷贝过来就可以了

主要修改的地方：

weui.uploader('#uploader', {
            url: '/NewProblem/FileUpload',  

url改成你上传的地址

后台随便写就好了 返回个JSON就OK

如：

  /// <summary>
        /// 附件的上传附件
        /// </summary>
        /// <returns></returns>
        public JsonResult FileUpload()
        {
            ResultJson rj = new ResultJson();
            主要为了 返回JSOn
            return Json(rj, JsonRequestBehavior.AllowGet);
        }

然后在JS获取成功之后需要用到

onSuccess: function onSuccess(ret) {
                if (ret.Result == true)
                {
                    uploadSuccessCount++;
                    if (uploadSuccessCount == uploadCount)
                    {

//主要用来判断多次上传是否全部成功
                        $('#loadingToast').fadeOut(100);
                        $("#submitBtn").removeClass("weui-btn_disabled");
                    }
                }

//核心  附加个fid 是你数据库的id，用来做删除用
                var uploadID = this.id;
                $("#uploaderFiles li").each(function(){
                    if ($(this).attr("data-id") == uploadID)
                    {
                        $(this).attr("data-fid", ret.OtherData);
                        //alert($(this).attr("data-fid"));
                    }
                });
                console.log(this, ret);
            },

删除Js

for (var i = 0, len = uploadList.length; i < len; ++i) {
                            var file = uploadList[i];
                            if (file.id == id) {
                                $("#uploaderFiles li").each(function () {
                                    if ($(this).attr("data-id") == id) {
                                        //$(this).attr("data-fid", ret.OtherData);
                                        var fid = $(this).attr("data-fid");
                                        $('#loadingToast').fadeIn(100);
                                        var param = {};
                                        param.flag = new Date().getTime();
                                        param.ID = fid;
                                        $.post("/NewProblem/DelTAttachment", param, function (data) {
                                            $('#loadingToast').fadeOut(100);
                                        });
                                    }
                                });
                                file.stop();
                                break;
                            }
                        }
                        target.remove();
                        gallery.hide();