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>