weui框架实现上传、预览和删除图片功能代码


Posted in Javascript onAugust 24, 2017

jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。

jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。

weui框架暂时只有css文件,并没有js文件实现其功能,我在其html+css后面增加了js实现其功能,为大家提供方便,也为自己保存记录。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="external nofollow" rel="stylesheet" />
    <link rel="stylesheet" href="weui.min.css" rel="external nofollow" rel="external nofollow" />
    <link rel="stylesheet" href="jquery-weui.css" rel="external nofollow" rel="external nofollow" />
  </head>
  <body>
    <div class="weui-gallery" id="gallery">
      <span class="weui-gallery__img" id="galleryImg"></span>
      <div class="weui-gallery__opr">
        <a href="javascript:" rel="external nofollow" class="weui-gallery__del">
          <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a>
      </div>
    </div>
    <div class="weui-cells weui-cells_form">
      <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">0/2</div>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file" style="background-image:url(../images/applogo180x180.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(../images/applogo180x180.png)"></li>
                <li class="weui-uploader__file" style="background-image:url(../images/applogo180x180.png)"></li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(../images/applogo180x180.png)">
                  <div class="weui-uploader__file-content">
                    <i class="weui-icon-warn"></i>
                  </div>
                </li>
                <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(../images/applogo180x180.png)">
                  <div class="weui-uploader__file-content">50%</div>
                </li>
              </ul>
              <div class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../js/mui.min.js"></script>
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
    <script type="text/javascript" src="jquery-weui.js"></script>
    <script type="text/javascript">
      mui.init();
      $(function() {
        var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
          $gallery = $("#gallery"),
          $galleryImg = $("#galleryImg"),
          $uploaderInput = $("#uploaderInput"),
          $uploaderFiles = $("#uploaderFiles");
        $uploaderInput.on("change", function(e) {
          var src, url = window.URL || window.webkitURL || window.mozURL,
            files = e.target.files;
          for(var i = 0, len = files.length; i < len; ++i) {
            var file = files[i];
            if(url) {
              src = url.createObjectURL(file);
            } else {
              src = e.target.result;
            }
            $uploaderFiles.append($(tmpl.replace('#url#', src)));
          }
        });
        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() { //这部分刚才放错地方了,放到$(function(){})外面去了
          console.log('删除');
          $uploaderFiles.find("li").eq(index).remove();
        });
      });
    </script>
  </body>
</html>

补充说明上述代码中引用以下的这四个文件可以到http://jqweui.com这个weui的官网去下载

<link rel="stylesheet" href="weui.min.css" rel="external nofollow" rel="external nofollow" />
 <link rel="stylesheet" href="jquery-weui.css" rel="external nofollow" rel="external nofollow" />
 <script type="text/javascript" src="jquery-2.1.4.js">
 </script><script type="text/javascript" src="jquery-weui.js"></script>

总结

以上所述是小编给大家介绍的weui框架实现上传、预览和删除图片功能代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript的函数
Jan 31 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
原生js实现放大镜
Feb 20 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 #jQuery
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 #Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 #Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 #Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 #Javascript
angular2路由切换改变页面title的示例代码
Aug 23 #Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 #Javascript
You might like
关于初学PHP时的知识积累总结
2013/06/07 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
vuex 的简单使用
2018/03/22 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
python比较2个xml内容的方法
2015/05/11 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
HTML5 与 XHTML2
2008/10/17 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
五五普法心得体会
2014/09/04 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
班主任寄语2016
2015/12/04 职场文书
初中历史教学反思
2016/02/19 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
如何利用pygame实现打飞机小游戏
2021/05/30 Python
Python OpenCV 图像平移的实现示例
2021/06/04 Python
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
Python中的xlrd模块使用整理
2021/06/15 Python