在微擎中使用自带的图片上传组件,有时在移动端需要单图上传,或者剪裁功能等等,需要原形函数,本文简要说明,详细参见微擎文档
1、html代码
<div class="mui-table-view-chevron">
<div class="mui-image-uploader">
<a href="javascript:;" class="mui-upload-btn mui-pull-right js-image-{$name}"></a>
<div class="mui-image-preview js-image-preview mui-pull-right"></div>
</div>
</div>
2、jquery代码
//上传图片 -- 原形
util.image($('.js-image-{$name}'), function(url){
$('.js-image-{$name}').parent().find('.js-image-preview').append('<input type="hidden" value="'+url.attachment+'" name="{$name}" /><img src="'+url.url+'" data-id="'+url.id+'" data-preview-src="" data-preview-group="__IMG_UPLOAD_{$name}" />');
if($('.js-image-{$name}').parent().find('img').length == 1){
util.toast('上传成功');
}else{
util.toast('上传失败');
}
}, {
crop : false,//是否剪裁
multiple : false,//是否多图上传 ---剪裁则此项必须为false
preview : '__IMG_UPLOAD_{$name}'
});
3、有些移动端上传图片不能删除,附删除图片源码
//删除图片
$(document).on("click", ".mui-clearfix .js-submit", function (a) {
var b = $(document).find(".mui-slider-group .mui-active").index();
$(".mui-image-preview input").eq(b).remove();
$(".mui-image-preview img").eq(b).remove();
var i = mui.previewImage({footer: util.templates["image.preview.html"]});
i.close();
});
4、说明
因为图片要用传输到后台,所以在后台中(php)添加 $name = ''; 跟微擎组件添加name值相同
本例亲测可行,另有删除图片可选择
该案例为移动端使用
如有更好的方法,欢迎提出^_^