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

随机推荐

monkey测试===easyMonkey测试【推荐】
easymonkey测试: easymonkey是基于monkey测试的一个二次开发工具.(关于monkey测试参见之前blog) easymonkey的特点就是方便,解决了很多参数命令上设置的麻烦, ...
Centos. Mac 通过nfs 搭建共享目录
centos 关闭fiewalld,selinux yum install yum install nfs-utils portmap vim /etc/exports 文件写入时使用anonuid用 ...
Spring,tk-mapper源码阅读
Mybatis的源码学习(一): 前言: 结合spring本次学习会先从spring-mybatis开始分析在学习mybatis之前,应该要对spring的bean有所了解,本文略过先贴一下myb ...
html,获取iframe的window,document，自定事件与iframe通信
获取iframe的window对象js代码如下.注意:一定要在文档加载完成之后,才能获取到 var Iframe=document.getElementById("script" ...
scala中常用特殊符号
参考资料: scala中常用但其他语言不常见的符号含义 Scala学习六:Scala中的特殊字符 =>(匿名函数) 参考文档:scala => 用法匿名函数 => 匿名函数,在Sp ...
JDK1.8源码泛读之Arrays
jdk1.8包含的常用集合工具类,一般包括两个: 数组工具类:`java.util.Arrays ` 结合工具类:`java.util.Collections` 今天就结合源码对`java.util. ...
bzoj 1559 AC自动机 + dp
思路:直接在状态图上跑dp,最后枚举一下42种一下的.. 这个枚举有点恶心. #include<bits/stdc++.h> #define LL long long #define ll ...
oracle导入DMP步骤
oracle导入DMP步骤如下:1.已经存在的数据库需要进行以下的操作,如果不存在,可略过: 删除用户 drop user SUDMDB cascade; 删除表空间和数据文件 ...
es6字符串、数值、Math的扩展总结
字符串的扩展 1.for...of遍历字符串 2.includes()判断字符串中是否包含某个字符串,返回bool 3.startsWith(),endsWith()分别盘对字符串的头部和尾部是否含有 ...
Ubuntu上开启Apache Rewrite功能的方法
Ubuntu上开启Apache Rewrite功能的方法本文介绍ubuntn系统中开启apache的urlrewrite功能的方法. 在Windows上开启Apache的urlRewrite非常简单 ...

Weui 文件上传完整版示例

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

随机推荐

热门专题