<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <title>WeUI-Uploader</title>

  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css" />

</head>

<body>

  <div class="container">

    <div class="weui_cells_title">上传</div>

    <div class="weui_cells weui_cells_form">

      <div class="weui_cell">

        <div class="weui_cell_bd weui_cell_primary">

          <div class="weui_uploader">

            <div class="weui_uploader_hd weui_cell">

              <div class="weui_cell_bd weui_cell_primary">图片上传</div>

              <div class="weui_cell_ft js_counter">0/6</div>

            </div>

            <div class="weui_uploader_bd">

              <ul class="weui_uploader_files">

                <!-- 预览图插入到这 --> </ul>

              <div class="weui_uploader_input_wrp">

                <input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""></div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

  <div class="weui_dialog_alert" style="display: none;">

    <div class="weui_mask"></div>

    <div class="weui_dialog">

      <div class="weui_dialog_hd"> <strong class="weui_dialog_title">警告</strong>

      </div>

      <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>

      <div class="weui_dialog_ft">

        <a href="javascript:;" class="weui_btn_dialog primary">确定</a>

      </div>

    </div>

  </div>

  <script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>

</body>

</html>

<script>

  $.weui = {};

  $.weui.alert = function(options){

    options = $.extend({title: '警告', text: '警告内容'}, options);

    var $alert = $('.weui_dialog_alert');

    $alert.find('.weui_dialog_title').text(options.title);

    $alert.find('.weui_dialog_bd').text(options.text);

    $alert.on('touchend click', '.weui_btn_dialog', function(){

      $alert.hide();

    });

    $alert.show();

  };  

  $(function () {

    // 允许上传的图片类型

    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];

    // 1024KB，也就是 1MB

    var maxSize = 1024 * 1024;

    // 图片最大宽度

    var maxWidth = 300;

    // 最大上传图片数量

    var maxCount = 6;

    $('.js_file').on('change', function (event) {

      var files = event.target.files;  

        // 如果没有选中文件，直接返回

        if (files.length === 0) {

          return;

        }  

        for (var i = 0, len = files.length; i < len; i++) {

          var file = files[i];

          var reader = new FileReader();  

            // 如果类型不在允许的类型范围内

            if (allowTypes.indexOf(file.type) === -1) {

              $.weui.alert({text: '该类型不允许上传'});

              continue;

            }  

            if (file.size > maxSize) {

              $.weui.alert({text: '图片太大，不允许上传'});

              continue;

            }  

            if ($('.weui_uploader_file').length >= maxCount) {

              $.weui.alert({text: '最多只能上传' + maxCount + '张图片'});

              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('image/png');  

                    // 插入到预览区

                    var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');

                    $('.weui_uploader_files').append($preview);

                    var num = $('.weui_uploader_file').length;

                    $('.js_counter').text(num + '/' + maxCount);  

                    // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传  

                    var progress = 0;

                    function uploading() {

                      $preview.find('.weui_uploader_status_content').text(++progress + '%');

                      if (progress < 100) {

                        setTimeout(uploading, 30);

                      }

                      else {

                            // 如果是失败，塞一个失败图标

                            //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');

                            $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();

                          }

                        }

                        setTimeout(uploading, 30);

                      };  

                      img.src = e.target.result;

                    };

                    reader.readAsDataURL(file);

                  }

                });

  });

//# sourceURL=pen.js

</script>

</body>

</html>

效果预览：

Weui upLoader的更多相关文章

  1. wap手机端实现上传图片流程

    实现图片上传使用了WeUI uploader插件 WeUI:是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计 流程:图片上传用到了FileReader,FormData,用这两个基本 ...

  2. vue+weui+FormData+XMLHttpRequest 实现图片上传功能

    首先是样式:https://weui.io/#uploader 在weui示例中可以看到是用以下方法进行选择图片 <input id="uploaderInput" clas ...

  3. WEUI控件JS用法

    /* dialog */ document.querySelector('#alertBtn').addEventListener('click', function () { _weui2.defa ...

  4. 微信WeUI入门2

    引入需要的样式文件 最重要的css文件为 weui.min.css 基本的框架如下: <!DOCTYPE html> <html lang="zh-CN"> ...

  5. WeUI教程/第三方扩展及其他UI框架对比

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.包含button.cell.dialog. progress. toa ...

  6. 微信小程序：app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui

    微信小程序  PK  APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project. ...

  7. 微信官方开源UI库-WeUI

    概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog.toast.article.icon等各式元素 ...

  8. weui 图片弹框

    添加图片与弹出效果对比: HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  9. weui 搜索框

    点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. iOS边练边学--图片的拉伸

    图片拉伸方法一: IOS 5.0以后才有的方法: - (void)viewDidLoad { [super viewDidLoad]; UIImageView *imageView = [[UIIma ...

  2. Entity Framework应用：使用Code First模式管理视图

    一.什么是视图 视图在RDBMS(关系型数据库管理系统)中扮演了一个重要的角色,它是将多个表的数据联结成一种看起来像是一张表的结构,但是没有提供持久化.因此,可以将视图看成是一个原生表数据顶层的一个抽 ...

  3. VMware 14 Pro 安装 CentOS 7

    今年准备好好学习一下.NET CORE了,那也是得学习Linux.然后又得学习更多,咬着牙干吧... 1.Vmware虚拟机安装 在windows平台,首先咱们得先安装Vmware虚拟机,步骤省略,一 ...

  4. SEO之基于thinkphp的URL伪静态

    最近基于thinkphp开发了个导购网站,现在有时间,将遇到的伪静态问题整理下,与大家分享.1.设置URL伪静态在config.ini.php中设置,如果只想前台URL伪静态,那么只在前台的confi ...

  5. 如何识别Java中的内存泄漏

    Java开发人员都知道,Java利用垃圾回收机制来自动保持应用程序内存的干净和健康.然而可能有人不知道的是,即使使用了垃圾回收机制,Java中仍然可能存在内存泄漏风险.如果你碰到下面的错误代码: ja ...

  6. JDK中的序列化和反序列化

    题外话:诸事缠身,不知不觉距离上一篇就将近一个月了,读书不易,学习不易,唯有坚持. 写来写去始终不满意,索性贴一个比较好的文章吧! 参考: [Java基础]序列化与反序列化深入分析

  7. pip -i 和 -U 参数

    例子: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -U funcat -i: 指定库的安装源 -U:升级 原来已经安装的包,不带U ...

  8. 防止 apk反编译 jocky-- java混淆代码 (转至：http://my.oschina.net/f839903061/blog/72554)

    1.下载jocky,解压后把整个文件夹复制到Eclipse的plugin目录.2.重启Eclipse,在项目上点右键,如果出现jocky菜单,则安装成功. 3.在项目上点右键,选菜单jocky-> ...

  9. php Laravel 框架之建立后台目录

    今天研究了在Laravel框架中的控制器中加入后台的目录.发现了一些小的规律,拿来和大家分享一下吧. 通常情况下,我们是直接在controllers目录中加入我们的控制器,然后再routes.php ...

  10. c++primer记录(二) 模板

    因为看得源码里有大量的类模板,所以补充下C++中模板的知识 模板:函数模板 类模板 .p- 函数模板的类型参数可由编译器进行推断,也可以由用户显式的指定,类模板的类型参数必须显式的给出: p- 非类型 ...