weui教程|weui实现图片上传、预览、删除功能代码

【www.bbyears.com--jquery】

weui的使用现在也是非常受广大开发工程师喜欢的，能为大家节省很多不必要的时间，这次文章就给大家介绍下weui怎么实现图片上传、预览、删除功能？具体实现代码我们下面一起来看看。

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

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

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

  
    
    
    
    
    
    jquery-weui.css" rel="external nofollow" rel="external nofollow" />
  
  
    
      
      
        
          
        
      
    
    
      
        
          
            
              
图片上传
              0/2
            
            
              

                

                

                

                

                  
                    
                  
                
                

                  50%
                
              
              
                
              
            
          
        
      
    
    <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 = "
",
          $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>
  

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

 
 <script type="text/javascript" src="jquery-2.1.4.js">
 </script><script type="text/javascript" src="jquery-weui.js"></script> 

本文来源：http://www.bbyears.com/wangyezhizuo/135532.html