Weui 文件上传完整版示例
web 微信开发 2020-12-11 2142 0
  1. 首页
  2. 微信开发
  3. 正文:Weui 文件上传完整版示例
关于本站

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

有需要网站维护，改版，病毒查杀，网站编辑，网站备案，html制作等相关的工作可以联系我。
本人有多年相关工作经验，也可提供免费咨询，交个朋友。
有需要探讨问题的朋友，也可以加我微信，共同探讨！
微信：15011482830 QQ:408917339

8045139 2687 39
分类目录
PHP 487
ThinkPHP 86
Mysql 66
jQuery 140
WampServer 15
DIV+CSS 113
DedeCMS 37
JavaScript 113
SQL 34
Sublime Text3 13
SQLServer 20
ASP 42
Bootstrap 18
IIS 25
AmazeUI 5
ThinkPHP5.1 259
Notepad++ 36
正则表达式 10
Layui 25
HTML标签 20
帝国cms 13
Linux 99
拼图Pintuer 6
Bootstrap4 19
kindeditor 11
HBuilderX 7
VSCode 62
微信开发 75
人人商城 15
Bootstrap5 33
宝塔 39
ThinkPHP6 72
百度小程序 5
Vue 140
Wordpress 20
Git 24
nodejs 31
React 5
zhtcms 3
其他 412
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (260)
Mysql (59)
DedeCms (33)
jQuery (74)
证件照 (1)
尺寸大小 (2)
背景颜色 (1)
setInc (4)
setDec (4)
onclick (5)
友情链接更多
超纯水设备
免费设计
海报设计
快递查询
图片上传Weui
打开边栏(ESC) 关闭边栏(ESC)

代码来源于网络，作为自己记录参考用。

参考代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
@{
    ViewBag.Title = "费用填报";
    Layout = "~/Views/Shared/_MForm.cshtml";
}
 
<html  >
<head>
    <meta name="viewport" content="width=device-width" />
</head>
<body  ontouchstart>
    <header class="mwapp-header">
        <div id="back" class="mwapp-header-icon-back"><span></span></div>
        <div class="mwapp-header-title">费用填报</div>
    </header>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">派车单号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" value="TRPSH201808000071" disabled>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="FeeName" class="weui-label">费用项</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="FeeName" type="text" value="">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="Amount" class="weui-label">金额</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" id="Amount"  placeholder="请输入金额">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="time-inline" class="weui-label">数量</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" placeholder="请输入数量,默认1" value="1" id="FeeCount">
            </div>
        </div>
  
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="InvoiceType" class="weui-label">发票类型</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="InvoiceType" type="text" value="">
            </div>
        </div>
        <div class="weui-cells__title">备注</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" id="Description" type="text" placeholder="请输入备注">
                </div>
            </div>
        </div>
        <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>/2</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/jpg,image/jpeg,image/png,image/gif"  multiple="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-gallery" id="gallery">
        <span class="weui-gallery__img" id="galleryImg"></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>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary"    href="javascript:" id="btnsaveCharge">提交费用</a>
    </div>
</body>
</html>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<script>
    var disno = request('disno');
   
    $(function() {
        $("#back").click(function() {
            location.href = '/TMS.App/CargoCharge/Index';
        });
        
        $("#FeeName").picker({
            cols: [
                {
                    textAlign: 'center',
                    values: ['内陆运费', '冷藏费', '压夜费']
                }
            ],
            onChange: function (p, v, dv) {
 
 
            },
            onClose: function (p, v, d) {
                if (v != null && v.length > 0) {
                    $("#FeeName").val(v[0]);
                }
 
            }
        });
 
        $("#InvoiceType").picker({
            cols: [
                {
                    textAlign: 'center',
                    values: ['普通发票', '专用发票']
                }
            ],
            onChange: function (p, v, dv) {
 
            },
            onClose: function (p, v, d) {
                if (v != null && v.length > 0) {
                    $("#InvoiceType").val(v[0]);
                }
            }
        });
          
        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        var maxSize = 1024 * 1024*10; // 10240KB，也就是 10MB
        var maxWidth = 1900;  // 图片最大宽度
        var maxCount = 2;// 最大上传图片数量
 
        //
        var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)"><div class="weui_uploader_status_content">0%</div></li>',
            $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");
 
        $uploaderInput.on("change", function (e) {
            files = e.target.files;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                var imgID = genGUID();
                var reader = new FileReader();
                var fileType = file.type;
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {
                     
                    $.toast('该类型不允许上传' + fileType, "forbidden");
                    continue;
                }
 
                if (file.size > maxSize) {
                    $.toast("图片太大，不允许上传", "forbidden");
                    continue;
                }
 
                if ($('.weui-uploader__file').length >= maxCount) {
                    $.toast('最多只能上传' + maxCount + '张图片', "forbidden");
                    return;
                }
              
 
                reader.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL(fileType,0.6); //0.6指的是压缩60%
 
                        // 插入到预览区
                        $uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#ImgID#', imgID)));
 
                        var num = $('.weui-uploader__file').length;
                        $('#uploadCount').text(num);
 
                        // 模拟上传进度
                        var progress = 0;
                        function uploading() {
                            $uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%');
                            if (progress < 100) {
                                setTimeout(uploading, 30);
                            } else {
                                $uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标
                            }
                        }
                        setTimeout(uploading, 30);
                    };
 
                    img.src = e.target.result;
                   
                   
                    //这里实现上传
            //$.ajax({});
 
 
 
                };
                reader.readAsDataURL(file);
 
            }
        });
 
 
 
        var index; //第几张图片
        $uploaderFiles.on("click", "li", function () {
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function () {
            $gallery.fadeOut(100);
        });
 
        //删除图片
        $(".weui-gallery__del").click(function () {
            $uploaderFiles.find("li").eq(index).remove();
            var num = $('.weui-uploader__file').length;
            $('#uploadCount').text(num);
        });
 
 
 
        $("#btnsaveCharge").click(function () {
             
 
            //或者在这里实现批量上传, 不建议批量上传
        });
 
    });
  //生成guid
    function genGUID() {
        var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        return (G1 + G2);
    }
   
</script>

引入示例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
 
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="author" content="mcp">
 
    <link href="~/Content/scripts/weui/jquery-weui.css" rel="stylesheet" />
    <link href="~/Content/scripts/weui/weui.css" rel="stylesheet" />
    <link href="~/Content/scripts/weui/weui-ext.css" rel="stylesheet" />
 
</head>
<body>
 
    <script src="~/Content/scripts/weui/jquery.min.js" charset="utf-8"></script>
    <script src="~/Content/scripts/weui/jquery-weui.js" charset="utf-8"></script>
    <script src="~/Content/scripts/weui/jquery-weui.js" charset="utf-8"></script>
    <script src="~/Content/scripts/weui/mobile-utils.js" charset="utf-8"></script>
    <script src="~/Content/scripts/weui/min/fastclick.js"></script>
    @RenderBody()
 
 
</body>
 
</html>

以下是自己的代码，作为记录用，其他人可忽视。

图片可批量上传，可删除

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>{$seo_title}</title>
    <link rel="stylesheet" href="/static/module/index/xin/css/weui.css"/>
    <link rel="stylesheet" href="/static/module/index/xin/css/example.css"/>
    <link rel="stylesheet" href="/static/module/index/xin/css/weuix.css"/>
    <link rel="stylesheet" href="/static/module/index/xin/css/login.css"/>
    <!-- <script src="/static/module/index/xin/js/jquery.js"></script> -->
    <script src="/static/module/index/xin/js/zepto.min.js"></script>
    <script src="/static/module/index/xin/js/zepto.weui.js"></script>
    <script src="/static/module/index/xin/js/lrz.min.js"></script>
    <script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style>
      /* confirm对话框居中 */
      .weui-dialog{
          left: 50%;
      }
    .remark {
        padding:10px 16px;
        color: #333333;
        font-size: 12px;
        line-height: 26px;
        background-color: #ffffff;
    }
    .red{color: red;}
  </style>
</head>
<body>
 
    <div class="remark">
        带<span class="red">*</span>号的为必填项。<br>
        本站受理以下类别网上有害信息：政治类、暴恐类、诈骗类、色情类、低俗类、赌博类、侵权类、谣言类。
    </div>
    <form action="{:url('index')}" method="post" id="form">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active index">
                <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>姓名</label></div>
                <div class="weui-cell__bd">
                    <input id="name" class="weui-input" placeholder="请输入姓名" type="text" value="">
                </div>
            </div>
            <div class="weui-cell weui-cell_active index">
                <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>手机号</label></div>
                <div class="weui-cell__bd">
                    <input id="phone" class="weui-input" placeholder="请输入手机号" type="text" value="">
                </div>
            </div>
            <div class="weui-cell weui-cell_active index">
                <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>邮箱</label></div>
                <div class="weui-cell__bd">
                    <input id="email" class="weui-input" placeholder="请输入邮箱" type="text" value="">
                </div>
            </div>
            <div class="weui-cell weui-cell_active index">
                <div class="weui-cell__hd"><label class="weui-label">地址</label></div>
                <div class="weui-cell__bd">
                    <input id="address" class="weui-input" placeholder="请输入地址" type="text" value="">
                </div>
            </div>
            <div class="weui-cell weui-cell_active index">
                <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>平台名称</label></div>
                <div class="weui-cell__bd">
                    <input id="platform_name" class="weui-input" placeholder="请输入被举报平台名称" type="text" value="">
                </div>
            </div>
            <div class="weui-cell weui-cell_active index">
                <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>平台类型</label></div>
                <div class="weui-cell__bd">
                    <input id="platform_type" class="weui-input" placeholder="请选择" type="text" value="">
                </div>
            </div>
             
            <div class="weui-cell weui-cell_active index">
                <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>链接</label></div>
                <div class="weui-cell__bd">
                    <input id="platform_url" class="weui-input" placeholder="请以http://或https://开头" type="text" value="">
                </div>
            </div>
            <div class="weui-cell weui-cell_active index">
                <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>举报类别</label></div>
                <div class="weui-cell__bd">
                    <input id="report_type" class="weui-input" placeholder="请选择大类" type="text" value="">
                </div>
            </div>
            <div class="weui-cell weui-cell_active index">
                <div class="weui-cell__hd"><label class="weui-label"></label></div>
                <div class="weui-cell__bd">
                    <input id="report_type2" class="weui-input" placeholder="请选择小类" type="text" value="">
                </div>
            </div>
             
            <div class="weui-cell weui-cell_active index" style="flex-direction: column;-webkit-align-items: center;align-items: start;">
                <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>举报内容</label></div>
                <div class="weui-cell__bd" style="width: 100%; margin-top: 10px;">
                    <textarea id="report_content" class="weui-textarea" placeholder="请输入内容" style="width: 100%; min-height: 70px;"></textarea>
                </div>
            </div>
        </div>
        <div class="cardid">附件</div>
        <style>
            .fj_remark{
                padding-left: 16px;
                padding-bottom: 10px;
                color: #999;
                font-size: 12px;
                line-height: 20px;
                background-color: #ffffff;
            }
        </style>
        <div class="fj_remark">上传附件最多不超过10个，每个附件大小不超过10M</div>
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files" id="zcard">
            </ul>
            <div class="weui-uploader__input-box">
                <input class="weui-uploader__input" accept="image/*" multiple="" type="file" id="uploaderInput">               
            </div>
        </div>
        <!-- <input value="" type="text" id="zcard_input" name="zcard" /> -->
         
        <script>
        $(function () {
            // 允许上传的图片类型
            var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
            var maxSize = 1024 * 1024 * 10; // 10240KB，也就是 10MB
            var maxWidth = 1900;  // 图片最大宽度
            var maxCount = 10;// 最大上传图片数量
             
            var $uploaderInput = $("#uploaderInput");
            $uploaderInput.on("change", function (e) {              
                files = e.target.files;
                // 如果没有选中文件，直接返回
                if (files.length === 0) {
                    return;
                }
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];
                    var reader = new FileReader();
                    var fileType = file.type;
                    // 如果类型不在允许的类型范围内
                    if (allowTypes.indexOf(file.type) === -1) {                       
                        $.toast('该类型不允许上传' + fileType, "forbidden");
                        continue;
                    }
                    if (file.size > maxSize) {
                        $.toast("图片太大，不允许上传", "forbidden");
                        continue;
                    }
                    if ($('.weui-uploader__file').length >= maxCount) {
                        $.toast('最多只能上传' + maxCount + '张图片', "forbidden");
                        return;
                    }
                    reader.onload = function (evt) {
                        // console.log(evt);
                        $.post("{:url('upload')}",{imgbase64: evt.target.result},function(rs){
                            // console.log(rs);
                            $("#zcard").html($("#zcard").html() + '<li onclick="removeimgs(this)" class="weui-uploader__file" style="background-image:url('+evt.target.result+')" v="'+ rs.src +'"></li>');
                            // $("#zcard_input").val($("#zcard_input").val() + ',' + rs.src);
                        },'json');
                    };
                    reader.readAsDataURL(file);
                    // console.log(file.files[0]);
                }
            });
        });
        function removeimgs(obj){
            $.confirm('您确定要删除吗?', '确认删除?', function() {$(obj).remove();});
            return false;
        }
        </script>
 
        <div class="weui-form__opr-area" style="margin-top: 15px;">
          <a href="javascript:" class="weui-btn weui-btn_default" id="showLoadingToast">提&nbsp;&nbsp;&nbsp;&nbsp;交</a>
        </div>
    </form>
    <div id="loadingToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast" style="visibility:visible;opacity: 1;">
            <i class="weui-icon_msg weui-icon-success-circle"></i>
            <p class="weui-toast__content">信息提交成功!</p>
        </div>
    </div>
 
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast" style="visibility:visible;opacity: 1;">
            <i class="weui-icon-warn weui-icon_toast" style="width: 35px;height: 35px;"></i>
            <p class="weui-toast__content" id="msg">网络错误，稍后再试！</p>
        </div>
    </div>
<script type="text/javascript">
    $(function(){
        var $loadingToast = $('#loadingToast');
        var $toast = $('#toast');
        $('#showLoadingToast').on('click', function(){
            var name = $("#name").val();
            var phone = $("#phone").val();
             
            var email = $("#email").val();
            var address = $("#address").val();
            var platform_name = $("#platform_name").val();
            var platform_type = $("#platform_type").val();
            var platform_url = $("#platform_url").val();
            var report_type = $("#report_type").val();
            var report_type2 = $("#report_type2").val();
            var report_content = $("#report_content").val();
            // var zcard = $('input[name="zcard"]').val().substr(1); // 获取附件的值，删除第一个字符','
            // 改为通过获取li的属性值，来获取图片的路径，这样删除图片的时候，不用再操作input，比较方便
            var gallery = [];
            $('.weui-uploader__file').each(function(){
                gallery.push($(this).attr('v'));
            });
            zcard = gallery.join(',');
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{:url()}",
                data: {name:name,phone:phone,email:email,address:address,platform_name:platform_name,platform_type:platform_type,platform_url:platform_url,report_type:report_type,report_type2:report_type2,report_content:report_content,zcard:zcard},
                success: function (result) {
                    // console.log(result)
                    if (result.code == 200) {
                        if ($loadingToast.css('display') != 'none') return;
                        $loadingToast.fadeIn(100);
                        setTimeout(function () {
                            $loadingToast.fadeOut(100);
                            location.reload();
                        }, 2000);
                         
                    }else if(result.code==300){
                        if ($toast.css('display') != 'none') return;
                        $("#msg").html('修改失败');
                        $toast.fadeIn(100);
                        setTimeout(function () {
                            $toast.fadeOut(100);
                        }, 2000);
                    }
                },
                error : function() {
                    if ($toast.css('display') != 'none') return;
                    $("#msg").html('网络错误！');
                    $toast.fadeIn(100);
                    setTimeout(function () {
                        $toast.fadeOut(100);
                    }, 2000);
                }
            })
             
        });
    });
</script>
<script type="text/javascript">
    $(function(){
        // 平台类型
        var aa = {$a};
        $("#platform_type").picker({
            title: "请选择平台类型",
            cols: [
                {
                    textAlign: 'center',
                    values: aa
                }
            ],
            onChange: function(p, v, dv) {
                console.log(p, v, dv);
            },
            onClose: function(p, v, d) {
                console.log("close");
            }
        });
        // 举报类别
        var bb = {$b};
        var cc = [];
        $("#report_type").picker({                       
            title: "请选择大类",
            cols: [
                {
                    textAlign: 'center',
                    values:bb
                }
            ],
            onChange: function(p, v, dv) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{:url('getreport_type2')}",
                    data: {province:dv},
                    success: function (result) {
                        if (result.code == 200) {
                            // console.log(result.data);
                            var xx=$.parseJSON(result.data);
                            cc.length = 0;
                            for (var i = 0; i < xx.length; i++) {
                                cc.push(xx[i]);
                            }
                        };
                    },
                    error : function(result) {
                    }
                });                           
            },
            onClose: function(p, v, d) {
                console.log(cc)
            }
        });
        $("#report_type2").picker({           
            title: "请选择小类",
            cols: [
                {
                    textAlign: 'center',
                    values:cc
                }
            ],
            onChange: function(p, v, dv) {
 
            },
            onClose: function(p, v, d) {
 
            }
        });
    });
  </script>
</body>
</html>

效果图

from clipboard

版权声明：本篇文章来源于网络。 来源链接

前一篇

微信公众号实现文章列表页功能
后一篇

微信小程序——客服功能接入
相关推荐
无法获取用户身份 登录的微信号未绑定为公众号的网页开发者
微信开发 | 2021-07-31 8021
无法获取用户身份 登录的微信号未绑定为公众号的网页开发者，无法使用Oauth授权登录获取用户身份，请查看文档并完成绑定 绑定为公众号网页开发者的流程如下 使用 appid 对应的公众号登录公众号管理后台 启用开发者中心，在 开发者工具 —— web 开发者工具 页面，向开发者微信号发送绑定邀请。绑定页面如下图所示： ...
公司企业邮箱绑定微信后，手机登录提示验证失败
微信开发 | 2018-03-06 7544
公司企业邮箱绑定微信后，手机端不能用原密码登录了，老是提示失败。 原因是：开启安全登录后，原密码无法登录企业邮箱。网页版需使用微信扫码登录；客户端需使用“客户端专用密码”登录,让我们的邮件安全再无后顾之忧。 客户端专用密码的生成方法： 1，pc端登录邮箱后，设置-账户-客户端专用密码-生成新密码 ...
微信小程序，修改按钮Button尺寸（宽度或高度）
微信开发 | 2020-09-29 6750
微信支付退款提示err_code:NOTENOUGH，该怎么处理？
微信开发 | 2020-12-02 5292
微信公众号实现文章列表页功能
微信开发 | 2020-12-08 4906
如何修改微信公众号的业务域名
微信开发 | 2018-02-07 3478
评论：0条
评论加载中...
发表评论
前一篇:
后一篇: