Weui 文件上传完整版示例
web 微信开发 2020-12-11 1659 0
关于本站

“最难不过坚持”

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

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

6503105 2619 39
最新评论
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 (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)

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

参考代码

@{
    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>

<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> 

引入示例

<!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>


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

图片可批量上传,可删除

<!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 7077
无法获取用户身份 登录的微信号未绑定为公众号的网页开发者,无法使用Oauth授权登录获取用户身份,请查看文档并完成绑定 绑定为公众号网页开发者的流程如下 使用 appid 对应的公众号登录公众号管理后台 启用开发者中心,在 开发者工具 —— web 开发者工具 页面,向开发者微信号发送绑定邀请。绑定页面如下图所示: ...
公司企业邮箱绑定微信后,手机登录提示验证失败
微信开发 | 2018-03-06 6765
公司企业邮箱绑定微信后,手机端不能用原密码登录了,老是提示失败。 原因是:开启安全登录后,原密码无法登录企业邮箱。网页版需使用微信扫码登录;客户端需使用“客户端专用密码”登录,让我们的邮件安全再无后顾之忧。 客户端专用密码的生成方法: 1,pc端登录邮箱后,设置-账户-客户端专用密码-生成新密码 ...
评论:0条
评论加载中...
发表评论