Weui 文件上传完整版示例

部分思路借用网友,部分是自己细化的. 先声明.

不多说,参考代码

@{

    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>

Weui 文件上传完整版示例的更多相关文章

使用java的MultipartFile实现layui官网文件上传实现全部示例，java文件上传
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. layui文件上传示例地址:https://www. ...
Struts2单文件上传原理及示例
一.文件上传的原理表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值: 1.application/x-www-form-urlencoded:这是默认编码方式,它只处理表单域里 ...
Struts2多文件上传原理和示例
一.创建上传文件的页面,代码如下所示 1.Struts2也可以很方便地实现多文件上传. 在输入表单域增加多个文件域:multifileupload.jsp <%@ page lan ...
SpringMVC ajax技术无刷新文件上传下载删除示例
参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...
nginx代理图片上传以及访问 nginx 图片上传完整版
nginx代理图片上传首先需要利用nginx代理图片访问参考 https://www.cnblogs.com/TJ21/p/12609017.html 编写接受文件的controller 1 @Po ...
.NetCore多文件上传进度的示例
主要讲的内容有: 1-----form方式上传一组图片 2-----ajax上传一组图片 3-----ajax提交+上传进度+一组图片上传 4-----Task并行处理+ajax提交+上传进度+一组图 ...
java+springboot+bootstrap-fileInput 文件上传前后台完整示例
先看效果图
【转】jsp+servlet和SSM分别是如何实现文件上传（示例）
原文地址:https://blog.csdn.net/niceliusir/article/details/78453560 以下是jsp+servlet和SSM分别是如何实现文件上传的方法示例两种 ...

随机推荐

Linux内核通知链机制的原理及实现【转】
转自:http://www.cnblogs.com/armlinux/archive/2011/11/11/2396781.html 一.概念: 大多数内核子系统都是相互独立的,因此某个子系统可能对其 ...
(十五)linux下gdb调试
一.gdb常用命令: 命令描述 backtrace(或bt) 查看各级函数调用及参数 finish 连续运行到当前函数返回为止,然后停下来等待命令 frame(或f) 帧编号选择栈帧 info(或 ...
jdk1.8在linux环境下的安装
转自博客:http://www.cnblogs.com/ShawnYuki/p/6816179.html
ora11g listener.ora
配置内容方式1: LISTENER = (DESCRIPTION_LIST = (DESCRIPTION = (ADDRESS = (PROTOCOL = IPC) (KEY = EXTPROC152 ...
NOIP 2013 day1
tags: 模拟快速幂逆序对树状数组归并排序最小生成树 lca 倍增 categories: 信息学竞赛总结 tex live 2017.iso 转圈游戏火柴排队货车运输转圈游戏 s ...
Codeforces 877C Slava and tanks（思维）
题目链接:http://codeforces.com/problemset 题目大意:有n个格子,某些格子里可能有一个或多个坦克,但不知道具体位置,每个坦克被轰炸一次就会移动到相邻的格子里(第1个格子 ...
redis之（十五）redis的集群中的哨兵角色
一:redis集群的哨兵的目的是什么?. (1)监控主redis和从redis数据库是否正常运行 (2)主redis出现故障,自动将其中一台从redis升级为主redis.将原先的主redis转变成从 ...
redis之（二）redis单机的安装，配置，启动，关闭
［1］下载redis压缩包,解压,编译
Gas Station——又是一道经典问题
There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...
css3翻书效果
强大的css3不需要解释,代码分层理解[直接复制],很有意思. 效果图: <ul class="align"> <li> <figure class= ...

Weui 文件上传完整版示例

Weui 文件上传完整版示例的更多相关文章

随机推荐

热门专题