Weui 文件上传完整版示例

时间 2019-11-17

标签 weui 文件上传完整示例繁體版

原文原文链接

部分思路借用网友,部分是本身细化的. 先声明.javascript

很少说,参考代码css

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

//引入示例html

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