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://m.bbyears.com/wangyezhizuo/135532.html
推荐访问:weui vue