微信公众号开发笔记6（WEUI组件实现图片上传、预览、删除）

最新推荐文章于 2024-05-20 23:36:00 发布
最新推荐文章于 2024-05-20 23:36:00 发布
阅读量578 收藏
点赞数
分类专栏： 微信公众号开发实例 文章标签： 微信 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MidYear/article/details/131706178
版权

没有废话直接上代码

1、新建HTML5，样式自行百度下载

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>八月皇帝</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="./plugin/weui-2.6.4/dist/style/weui.min.css"/>
    <link rel="stylesheet" href="./css/weui.css"/>
    <link rel="stylesheet" href="./css/weuix.css"/>


    <style>

    </style>

</head>

<body ontouchstart>
<div class="page-bd-15">
    <div class="weui-form">
        <div class="weui-form__bd">
            <div class="weui-form__text-area">
                <h2 class="weui-form__title">XXXX问题反馈表</h2>
            </div>
            <div class="weui-form__control-area">
                <div class="weui-cells__group weui-cells__group_form">
                    <div class="weui-cells__title">个人基本信息</div>
                    <div class="weui-cells">
                        <label for="js_input1" class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
                            <div class="weui-cell__bd">
                                <input id="js_input1" class="weui-input" placeholder="填写本人微信号"  />
                            </div>
                        </label>

                        <label for="js_input2" class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><span class="weui-label">昵称</span></div>
                            <div class="weui-cell__bd">
                                <input id="js_input2" class="weui-input" placeholder="填写本人微信号的昵称"/>
                            </div>
                        </label>
                        <label for="js_input3" class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><span class="weui-label">联系方式</span></div>
                            <div class="weui-cell__bd">
                                <input id="js_input3" class="weui-input" placeholder="请填写联系方式" type="number" pattern="[0-9]*" />
                            </div>
                        </label>

                        <div class="weui-cells weui-cells_form">
                            <div class="weui-cells__title" style="margin-top: 8px">问题描述</div>
                            <div class="weui-cell weui-cell_active">
                                <div class="weui-cell__bd">
                                    <textarea class="weui-textarea" placeholder="请描述你的问题" rows="3" maxlength="200"></textarea>
                                    <div role="option" aria-live="polite" class="weui-textarea-counter"><span>0</span>/200</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="weui-cell weui-cell_active">
                            <div class="weui-uploader">
                                <div class="weui-uploader__hd">
                                    <p class="weui-uploader__title">图片上传及预览</p>
                                    <div class="weui-uploader__info"><span class="imgSum"></span>/8</div>
                                </div>
                                <div class="weui-uploader__bd">
                                    <ul class="weui-uploader__files" id="uploaderFiles">
                                        <li class="weui-uploader__file" style="background-image:url(./images/1.jpg)"></li>
                                        <li class="weui-uploader__file" style="background-image:url(./images/2.jpg)"></li>
                                        <li class="weui-uploader__file" style="background-image:url(./images/3.jpg)"></li>
                                        <li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/1.jpg)">
                                            <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/2.jpg)">
                                            <div class="weui-uploader__file-content">50%</div>
                                        </li>
                                    </ul>
                                    <div class="weui-uploader__input-box">
                                        <input id="uploaderInput" class="weui-uploader__input" accept="image/*" multiple="" type="file">
                                    </div>
                                </div>
                            </div>
                            <div class="weui-gallery" style="display: none">
                                <span class="weui-gallery__img"></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>
                    </div>
                </div>
            </div>
        </div>

        <div class="weui-form__ft">
            <div class="weui-form__opr-area">
                <a role="button" disabled aria-disabled="true" class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:">确定</a>
            </div>

            <div class="weui-form__extra-area">
                <div class="weui-footer">
                    <p class="weui-footer__links">
                        <a href="./pay.html" class="weui-footer__link">XXXX门户网站</a>
                    </p>
                    <p class="weui-footer__text">Copyright © 2023 XXXXXXX有限公司 版权所有 </p>
                </div>
            </div>
        </div>
    </div>


</div>




<!--页面切换-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"> </script>
<script src="./js/zepto.min.js"></script>
<script src="./js/zepto.weui.js"></script>
<script src="./js/lrz.min.js"></script>
<script src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.18/weui.min.js"></script>
<script src="js/common.js"></script>
<script src="js/main.js"></script>
</body>
</html>

js实现部分

<script>
    $(function(){
        uploaderImg();
        sumImgSize();
    });

    function sumImgSize() {
        var length = document.getElementById("uploaderFiles").getElementsByTagName("li").length;
        $('.imgSum').text(length);
    }
    function uploaderImg() {
        var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';
        var      $uploaderInput = $("#uploaderInput"); //上传按钮+
        var       $uploaderFiles = $("#uploaderFiles");    //图片列表
        var $galleryImg = $(".weui-gallery__img");//相册图片地址
        var $gallery = $(".weui-gallery");

        $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)));
                sumImgSize();
            }
        });
        var index; //第几张图片
        $uploaderFiles.on("click", "li", function(){
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            console.log(this)
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function(){
            $gallery.fadeOut(100);
        });
        //删除图片
        $(".weui-gallery__del").click(function() {
            $uploaderFiles.find("li").eq(index).remove();
        });
    }
    

</script>

效果图

可以预览和删除

 

 上传新的图片

 

 

 

Em-August
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
weui图片上传完美封装版前后台，集成图片上传、压缩、预览、删除，保存等功能，包括上传进度百分比特效及上传个数显示功能
09-24
基于weui图片上传插件的完美封装，经过多次修改，特别适合jquery weui框架开发使用，集成图片上传、压缩、预览、删除，保存等功能，包括上传进度百分比特效及上传个数显示功能。示例包括上传页面及php后台接收保存页面。资源分值较高，但一写是物有所值！
微信开发系列——微信订阅号前端开发利器：WeUI
weixin_30512043的博客
02-28 115
阅读目录 一、WeUI组件介绍 二、组件基本用法 1、引用必须的文件 2、最基础的组件样式 3、其他基础组件效果示例 三、自定义组件 1、简单的弹出层 2、图片全屏预览 四、使用示例 五、总结 正文 前言：年前的两个星期，学习了下微信公众号的开发。后端基本能够基于盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，关于手机...
微信小程序开发资源汇总
2401_84046677的博客
04-21 682
分布式技术专题+面试解析+相关的手写和学习的笔记pdf《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！” />分布式技术专题+面试解析+相关的手写和学习的笔记pdf还有更多Java笔记分享如下：[外链图片转存中…(img-FWj0DkcY-1713681365728)]《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
如何入门微信小程序开发，超详细学习指南大全
gyufan的博客
05-05 4817
原创微信小程序学习路线，包含全面的知识点、免费资源、开源源码、开发框架、学习建议、项目、小程序技术变现、流量主、副业赚钱、资讯。
微信小程序开发学习资料
不会写代码的码农
09-18 6035
是其它地方看到的，不知道怎么转载到csdn上，自己收藏用的，大家看到原谅，很不错的一篇文章。 作者：初雪 链接：https://www.zhihu.com/question/50907897/answer/128494332 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） …前言：新人第一坑，跳坑指
微信公众号开发前端框架WeUI和SUI和MintUI
02-07
微信公众号开发，主要是移动端网页的页面开发，在这里推荐3个移动端UI框架：WeUI、SUI和Mint UI
微信公众号网页开发使用 WeUI优势
10-30
本资源详细介绍了微信公众号网页开发使用 WeUI优势，为快速开发公众号网页开发的必备利器，为企业节约了微信网页的设计和开发成本
微信weui+扩展组件，适合微信公众号前端开发和移动网站开发
06-16
微信weui+扩展组件,非常强大,增加数倍的组件，适合微信公众号前端开发和移动网站开发,。WeUI+基于Zepto1.2和weui1.13等众多开源项目参考而成的,接近100个组件/插件,最目前全网效果最全的MobileUI.
weui框架实现上传、预览和删除图片功能代码
10-19
weui框架暂时只有css文件，并没有js文件实现其功能，我在其html+css后面增加了js实现其功能，为大家提供方便，也为自己保存记录。具体实例代码大家参考下本
jQuery WeUI组件微信公众号页面模板
04-25
jQuery WeUI组件微信公众号页面模板jQuery WeUI组件微信公众号页面模板
基于微信的家庭理财管理小程序的设计与实现(论文+源码)_kaic
最新发布
涉及毕业论文、远程调试、小程序、管理系统、JAVA、C#、IDEA、VS开发工具等
05-20 496
2018年12月，李秀红，徐介新，吕兰兰等人在《基于Android的大学生掌上理财管理系统的分析与设计》中首先采集了在校生对于功能方面的意见和建议，在技术层面，采用了Android操作系统，选用了SQLite作为数据库，同时使用了一款名为AChartEngine的优秀的视觉工具，该系统的实现培养了用户的理财意识和理财能力，提升了大学生校园生活品质[11]。此外，系统保证了数据安全性，用户可以自行在前台输入自己的收入信息、支出信息，管理员是无权对于用户的消费进行修改的，保证了用户的隐私。
Linux知识点笔记
exercise_smile的博客
05-16 898
Linux 主要的发行版(release):Ubuntu(乌班图)、 RedHat(红帽)、 CentOS、 Debain[蝶变]、 Fedora、 SuSE、 OpenSUSE [示意图]在 linux 中的每个用户必须属于一个组， 不能独立于组外。在 linux 中每个文件 有所有者、 所在组、 其它组的概念。ls -l 中显示的内容如下：0-9 位说明：第 0 位确定文件类型(d, - , l , c , b)l 是链接， 相当于 windows 的快捷方式。
推荐系统学习笔记（一）
weixin_44880995的博客
05-15 148
同类策略（精排中的两种模型）天然互斥，并且（两条召回通道）效果会相互影响，避免干扰。反转：有的指标立刻影响，有的需要长期观测-------尽快推全也可以长期观测。10%作为holdout桶，实验使用剩余的90%，做diff（需要归一化）不同策略（添加召回通道，优化粗排模型）通常不会干扰，可以作为正交的两层。保留10%，完全不受实验影响，可以考察整个部门对业务指标的贡献。同层互斥----避免一个用户被两个实验影响。不同层正交----每层独立随机分配用户。推全：新层，与其他层正交，90%用户。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1040
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
并发编程笔记3--synchronize底层实现原理
qq_41056506的博客
05-17 737
Java中每一个对象都可以作为锁，具体的表现为以下3中方式当一个线程试图访问同步代码块时，他必须先获得锁。退出或抛出异常必须释放锁。那么锁到底存在哪里呢？锁中存储的是什么信息呢？从JVM规范中可以看到Synchronize在JVM中的实现原理，JVM是基于进入或退出Monitor对象来实现方法同步和代码块同步，但两者的实现细节不一样。1、代码块同步是使用monitorenter和monitorexit指令实现，2、而方法同步是使用另一种方式实现的，细节在JVM规范中并未详细说明。
【3dmax笔记】022：文件合并、导入、导出
「 刘一哥与GIS的故事」
05-15 54
3dmax高版本转低版本只能向下转换3个版本，可以选择导出为fbx，解除版本限制。只能合并 max 文件（高版本能够合并低版本模型，低版本不能合并高版本的模型）。导入格式有- - - fbx dwg skp 等等。
Vision Mamba代码笔记
Zssss12的博客
05-20 418
事实上Vision Mamba重写了这个Mamba类，可以看到里边是由bimamba_type这个参数的（这其实也是Vision Mamba的主要贡献），执行如下代码。值得说明的一点是，如果你之前在跑其他的mamba，环境拿过来是不能直接直接用的，因为标准的Mamba类是没有bimamba_type这个参数的，所以，需要去Vim代码官网去找到mamba-1p1p1包，下载之后放自己项目里。按照官方readme.md配置，如果有问题照着下面这个链接改。我手敲的带中文注释的链接。
线性回归学习笔记
julyclj55555的博客
05-15 266
换句话说，多元线性回归可以有足够的精确性，但对于该精确性的合理解释会比较难，因为在多个属性中，可能有其中多组子属性的组合都能拟合到近似最优的模型效果，但对不同组的子属性的组合解释，会因为属性不同而有很大区别，这就是统计学家莱奥·布雷曼口中的“罗生门”（Rashomon）。它的值越大代表，拟合的结果越可信；将“罗生门”深挖一步，就是机器学习和统计学在认识论上的差异：统计学讲究的是“知其然，知其所以然”，它不仅要找出数据之间的关联性，还要挖出背后的因果性，给计算出的结果赋予令人信服的解释才是统计的核心。
webmagic爬取微信公众号
05-09
WebMagic 是一款非常好用的 Java 爬虫框架，可以用来爬取各种网站。对于爬取微信公众号，可以使用 WebMagic 结合公众号的历史文章链接来进行爬取。下面是一个简单的爬取微信公众号文章的示例代码： ```java import us.codecraft.webmagic.processor.PageProcessor; import us.codecraft.webmagic.Site; import us.codecraft.webmagic.Spider; import us.codecraft.webmagic.selector.Html; import us.codecraft.webmagic.selector.Selectable; import java.util.List; public class WeChatPublicAccountPageProcessor implements PageProcessor { private Site site = Site.me().setRetryTimes(3).setSleepTime(1000); public Site getSite() { return site; } public void process(Page page) { Html html = page.getHtml(); String title = html.xpath("//title/text()").get(); List<Selectable> articleNodes = html.xpath("//div[@class='weui_media_bd']/h4/a") .nodes(); for (Selectable node : articleNodes) { String articleTitle = node.xpath("/a/text()").get(); String articleUrl = node.xpath("/a/@href").get(); // 把文章链接放到待爬取队列中 page.addTargetRequest(articleUrl); } // 如果是文章页面，则解析文章内容 if (page.getUrl().regex("https://mp.weixin.qq.com/s").match()) { String content = html.xpath("//div[@class='rich_media_content']") .get(); // 把文章内容存储到数据库中或者进行其他处理 // ... } } public static void main(String[] args) { Spider.create(new WeChatPublicAccountPageProcessor()) .addUrl("https://mp.weixin.qq.com/profile?{account_id}") .run(); } } ``` 代码中，我们使用了 WebMagic 的 `PageProcessor` 接口来处理页面，通过 `addUrl()` 方法来添加待爬取的微信公众号链接，然后在 `process()` 方法中解析历史文章链接并添加到待爬取队列中，如果是文章页面，则解析文章内容并进行其他处理。需要注意的是，需要替换花括号中的 `{account_id}` 为对应的公众号ID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值