微擎上传图片(原形函数)

在微擎中使用自带的图片上传组件,有时在移动端需要单图上传,或者剪裁功能等等,需要原形函数,本文简要说明,详细参见微擎文档

1、html代码


2、jquery代码

//上传图片 -- 原形  
util.image($('.js-image-{$name}'), function(url){  
  $('.js-image-{$name}').parent().find('.js-image-preview').append('');  
  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值相同
 本例亲测可行,另有删除图片可选择
 该案例为移动端使用
 如有更好的方法,欢迎提出^_^




你可能感兴趣的:(微擎)