jQuery WeUI is a simple and powerful UI library designed for the development of WeChat public accounts. It contains all the official WeUI CSS components and provides a large number of expansion components. The rich component library can greatly reduce front-end development time.
The biggest feature of jQuery WeUI is that it only provides UI components and does not have any restrictions on the frameworks and other libraries used by the project. It can be used in almost any environment. Whether your project is based on jQuery, React, Angular, Vue, you will find that jQuery WeUI can be used very easily with them. It is not only an old project with a long history, but it can be almost ready to use.
The weui framework has only css files for the time being, and no js files implement its functions. I added js to implement its functions after html+css, which provides convenience for everyone and saves records for myself.
<!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/" rel="external nofollow" rel="stylesheet" />
<link rel="stylesheet" href="" rel="external nofollow" rel="external nofollow" />
<link rel="stylesheet" href="" rel="external nofollow" rel="external nofollow" />
</head>
<body>
<div class="weui-gallery" >
<span class="weui-gallery__img" ></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">Image upload</p>
<div class="weui-uploader__info">0/2</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" >
<li class="weui-uploader__file" style="background-image:url(../images/)"></li>
<li class="weui-uploader__file" style="background-image:url(../images/)"></li>
<li class="weui-uploader__file" style="background-image:url(../images/)"></li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(../images/)">
<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/)">
<div class="weui-uploader__file-content">50%</div>
</li>
</ul>
<div class="weui-uploader__input-box">
<input class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/"></script>
<script type="text/javascript" src="jquery-2.1."></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
();
$(function() {
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");
$("change", function(e) {
var src, url = || || ,
files = ;
for(var i = 0, len = ; i < len; ++i) {
var file = files[i];
if(url) {
src = (file);
} else {
src = ;
}
$($(('#url#', src)));
}
});
var index; //What picture is the first $("click", "li", function() {
index = $(this).index();
$("style", ("style"));
$(100);
});
$("click", function() {
$(100);
});
//Delete the picture The code to delete the picture is also posted. $(".weui-gallery__del").click(function() { //I just put this part in the wrong place and went outside $(function(){}) ('delete');
$("li").eq(index).remove();
});
});
</script>
</body>
</html>
Additional instructions: The following four files referenced in the above code can be obtained.Download this official website of weui
<link rel="stylesheet" href="" rel="external nofollow" rel="external nofollow" /> <link rel="stylesheet" href="" rel="external nofollow" rel="external nofollow" /> <script type="text/javascript" src="jquery-2.1."> </script><script type="text/javascript" src=""></script>
Summarize
The above is the code of the weui framework that the editor introduced to you to upload, preview and delete pictures. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!