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

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框架实现上传、预览和删除图片功能代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-08-21

Angularjs整合微信UI(weui)

引子 不久前,微信推出了自己的一套UI,我看有很多开发者将其套用在了一些前端框架中,比如react.vue.最近自己在学习Angularjs,所以,也想把这个UI整合到这个框架,这几天试了一下,简单的套用了一个功能,现在分享给大家,分离做的不好,请高手指点. 适合读者 有一定的Angularjs基础,并且了解ngRoute.ngAnimate的人群. 包含文件 整合的时候,参照官方的演示页面,自己也做了一个演示页面,完全使用Angularjs做的,没有引用其它框架.下面先说明一下引入的文件. 使

巧用weui.topTips验证数据的实例

场景一.有一个输入金额的场景,这个金额需要验证,验证说明如下: 不能为空格: 不能为0: 不能为汉字: 不能为其它字符: 不能大于200: 唯一可以的是,只有输入3~199之间的数字,下面的确定按钮才会显示,否则,隐藏这个按钮. HTML: <!--医生问诊金额--> <div class="weui-jiaj-panel"> <div class="weui-jiaj-money-box dialog js_show"> <

weUI应用之JS常用信息提示弹层的封装

weUI应用,自己用JS封装了几个常用的信息提示的弹层 测试页面的代码在后面有贴出 几个弹层如下图 HTML页面代码: <!DOCTYPE html> <html> <head> <title>weUI-test</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,c

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

项目结构,在组件文件夹(components)下新建common文件夹,所用公用组件放里面,本例包含tips和loading两个 一.loading组件 1.loading.vue组件内容如下: 代码: <template> <div class="loading" v-show="loading"> <img src="./loading.gif"> </div> </template>

JS组件Bootstrap实现弹出框和提示框效果代码

前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

js制作带有遮罩弹出层实现登录注册表单特效代码分享

本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图:                     ----------------------查看效果   源码下载----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. jquery制作的带有遮罩弹出层实现登录注册等表单的特效源码,是一段实现了点击后在原始页面上弹出想用页面的代码.  为大家分享的js制作带有遮罩弹出层实现登录注册表单代码特效

JS常用函数使用指南

1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大

vue实现element表格里表头信息提示功能(推荐)

如图:在element表格操作一栏需要添加提示功能 实现效果 如图:鼠标浮上去弹出tips 解决方案 1.编写组件 在 promptMessage.vue 文件里面实现 <template> <!-- 处理element表格表头文字提示特别添加全局注册组件 --> <div class="promt-message-tooltip"> <el-tooltip effect="light" placement="le

基于Vue.js+Nuxt开发自定义弹出层组件

今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

js与css实现弹出层覆盖整个页面的方法

本文实例讲述了js与css实现弹出层覆盖整个页面的方法.分享给大家供大家参考.具体实现方法如下: 弹出层透明背景加框的常用样式和结构如下: 复制代码 代码如下: .alertMessageBg{ position:fixed; _position:absolute; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); z-

JS常用正则表达式总结【经典】

本文实例讲述了JS常用正则表达式.分享给大家供大家参考,具体如下: 在项目中个人写的一个常用验证的正则表达式:(仅供参考) //定义两个全局变量 var reg; var errorInfo; //输入的数字类型必须是int型,正负整数都可以 function validate_integer(text,value){ reg=/^[-\+]?\d+$/; errorInfo=text+" "+value+" 只能是整数,请核实重新输入!"; verifyByReg

修改js confirm alert 提示框文字的简单实例

修改js confirm alert 提示框文字的简单实例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> *{padding: 0; margin: 0;} html{ height: 100%; } body{ font-size: 16px; font-family: "Microsoft Yahe