weui上传、预览和删除图片

最新推荐文章于 2024-05-11 09:47:59 发布

GengbinZ

最新推荐文章于 2024-05-11 09:47:59 发布

阅读量7.5k

点赞数 2

分类专栏：微信开发（weui，mui框架）

本文链接：https://blog.csdn.net/qq_16146389/article/details/77511646

版权

微信开发（weui，mui框架）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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="stylesheet" />
        <link rel="stylesheet" href="weui.min.css" />
        <link rel="stylesheet" href="jquery-weui.css" />
    </head>

    <body>
        <div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></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 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" />
 <link rel="stylesheet" href="jquery-weui.css" />
 <script type="text/javascript" src="jquery-2.1.4.js">
 </script><script type="text/javascript" src="jquery-weui.js"></script>

GengbinZ

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
weui上传、预览和删除图片

weui框架暂时只有css文件，并没有js文件实现其功能，我在其html+css后面增加了js实现其功能，为大家提供方便，也为自己保存记录。<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="widt
复制链接

扫一扫