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://blog.csdn.net/xu_guo/article/details/6072823 版权声明:本文为博主原创文章,未经博主允许不得转载. 自旋锁最多只能被一个可执行线程持有( ...
Redis 分片实现 Redis Shard [www]
Redis 分片实现 Redis Shard https://www.oschina.net/p/redis-s ...
C# 读写XML文件示例
using System; using System.Collections.Generic; using System.Text; using System.Configuration; using ...
c++设计模式系列----单例模式（Singleton模式
单例模式是为了解决唯一对象实例问题而提出来的,许多时候整个系统只需要拥有一个全局对象,这样有利于我们协调系统整体的行为.比如在某个服务器程序中,该服务器的配置信息存放在一个文件中,这些配置数据由一个单 ...
vue-cli脚手架引入element UI的正确打开方式
element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...
mybatis多表查询，自动生成id
主要是在配置文件中,配置好所要包含的字段. 类关系:account----role,1对1 account包含role类 java类: public class Account{ private In ...
【机器学习】k-近邻算法应用之手写数字识别
上篇文章简要介绍了k-近邻算法的算法原理以及一个简单的例子,今天再向大家介绍一个简单的应用,因为使用的原理大体差不多,就没有没有过多的解释. 为了具有说明性,把手写数字的图像转换为txt文件,如下图所 ...
mac 远程桌面连接分享
mac 远程桌面连接分享 8.0版本 https://pan.baidu.com/s/1wgVvAmQreGwYZAhLST764w 10.0版本 https://pan.baidu.com/s/1Y ...
报错AbstractStandardExpressionAttributeTagProcessor
java.lang.NoSuchMethodError: org.thymeleaf.standard.processor.AbstractStandardExpressionAttributeTag ...
spring mvc 表单提交乱码
1.在web.xml添加过滤器: <filter> <filter-name>SpringCharacterEncoding</filter-name> <f ...

Weui 文件上传完整版示例

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

随机推荐

热门专题