weui上传、预览和删除图片

来源：互联网发布：网络直播怎么赚钱的编辑：程序博客网时间：2024/06/05 11:10

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>

阅读全文

0 0