weui blob图片php接收,weui框架实现上传、预览和删除图片功能代码

jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。

jQuery WeUI 的最大特点是它只提供UI组件，并不会对项目所使用的框架和其他库有任何的限制，几乎可以在任何环境下使用。无论你的项目是基于jQuery，还是 React, Angular, Vue， 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目，也几乎可以做到拿来即用。

weui框架暂时只有css文件，并没有js文件实现其功能，我在其html+css后面增加了js实现其功能，为大家提供方便，也为自己保存记录。

图片上传

0/2

• 50%

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();

});

});

补充说明上述代码中引用以下的这四个文件可以到http://jqweui.com这个weui的官网去下载

总结

以上所述是小编给大家介绍的weui框架实现上传、预览和删除图片功能代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！