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分别是如何实现文件上传的方法示例两种 ...

随机推荐

网络设备之pci_device_id
标准PCI设备都有一个配置寄存器,用来存储各种参数: /* pci设备配置寄存器 */ struct pci_device_id { /* 厂商id,设备id */ __u32 vendor, dev ...
js中常用的数组方法
在数组的尾部增加或删除某个元素:push() 和 pop() push() : 在数组的尾部追加一个或多个元素,并返回数组的长度 pop():在数组的尾部删除一个元素,并返回被删除项 var arr ...
tornado 模版继承函数和类的调用
模版继承.函数和类的调用目录结构 lesson5.py # -*- coding:utf-8 -*- import tornado.web import tornado.httpserver imp ...
23：django 信号（signal）
django包含了一个“信号分配器”使得当一些动作在框架的其他地方发生的时候,解耦的应用可以得到提醒.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者,这是特别有用的设计因为有些 ...
linux命令（42）：wc命令
Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1．命令格式: wc [选项]文件... 2．命令功能: 统计指定文件中的字节数. ...
安卓屏幕旋转时，禁止Activity重新加载
安卓设备旋转屏幕时,Activity默认会重新加载,如果是要读取大量数据的场景,那等待的时间比较长,这一点不可接受,所以要想办法禁止Activity自动重新加载. 方法如下在AndroidManife ...
使用JavaScript实现长方形、直角三角形、平行四边形、等腰三角形、倒三角、数字三角形
[循环嵌套的规律] 1.外层循环控制行数,内层循环控制每行中元素的个数. [图形题思路] 1.确定图形有几行,行数即为外层循环次数: 2.确定每行中有几种元素组成,有几种元素表示有几 ...
Linux（CentOS）下的JDK的安装和环境配置
下载对应版本JDK,如jdk-6u45-linux-i586-rpm.bin添加执行权限:#chmod +x jdk-6u45-linux-i586-rpm.bin安装:#./jdk-6u45-lin ...
vue-music 关于Search（搜索页面）-- 搜索历史
搜索历史展示每一次搜索过,并选中的关键字,保存数据到数组.搜索历史数据是需要在多个组件中共享的,所以保存在vuex 中 searchHistory 数组中,保存触发在搜索列表点击选中之后派发事件到se ...
其实参与QtCreator开发也很容易
http://bbs.csdn.net/topics/370241186 10个月前发过一个组建Qt团队,共同研究.学习.完善QtCreator的帖子,不过在为QtCreator提交完一个补丁后,就没 ...

Weui 文件上传完整版示例

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

随机推荐

热门专题