app中的图片上传,例如:个人信息页面,上传头像

使用:

UIMediaScanner
地址:
https://docs.apicloud.com/Client-API/UI-Layout/UIMediaScanner

前端代码

<div class="img_box">
<img class="imgPic" src="../../image/33.jpg"/>
<a class="chooseImg" href="javascript:;" onclick="chooseImg();">点击上传</a>
<p class="lessen">提示:点击图片以重新上传</p>
</div>

js数据处理

apiready = function(){
UIMediaScanner = api.require('UIMediaScanner');
};
//上传照片
//使用本模块前需在云编译页面添加勾选访问相册权限,否则会有崩溃闪退现象
var UIMediaScanner = null;
function chooseImg() {
api.actionSheet({
cancelTitle: '取消',
buttons: ['拍照', '从手机相册选择']
}, function(ret, err) {
var index = ret.buttonIndex;
if (index == 1) {
api.getPicture({
sourceType: 'camera',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
quality: 40,
saveToPhotoAlbum: true
}, function(ret, err) {
if (ret) {
updateImg(ret.data);
}
});
} else if (index == 2) {
UIMediaScanner.open({
type : 'picture',
column : 4,
max : 1,
sort : {
key : 'time',
order : 'desc'
},
texts : {
stateText : '选择图片',
cancelText : '取消',
finishText : '完成'
},
styles : {
bg : '#fff', //资源器背景
mark : { //选中图片后的,对号
icon : '',
position : 'bottom_left', //位置
size : 30 //大小
},
nav : {
bg : '#fff',
stateColor : '#56b7e1',
stateSize : 18,
cancelBg : 'rgba(0,0,0,0)',
cancelColor : '#56b7e1',
cancelSize : 15,
finishBg : 'rgba(0,0,0,0)',
finishColor : '#56b7e1',
finishSize : 15
}
},
exchange : true
}, function(ret, err) {
if (ret) {
//transPath 图片 转换徐调用
UIMediaScanner.transPath({
//图片的路径
path : ret.list[0].path
}, function(ret, err) {
if (ret) {
updateImg(ret.path);
} else {
$api.showToast('图片转换出错,请重新选择');
}
});
}
});
}
});
}; // 上传图片
function updateImg(path) {
api.showProgress({
title : ' ',
text : '正在上传...',
modal : true
});
api.ajax({
url : MainUrl + 'User&a=upload_img',
method : 'post',
timeout : 60,
dataType : 'json',
returnAll : false,
data : {
files : {
'images' : path
}
}
}, function(data, err) {
api.hideProgress();
if (err) {
$api.showToast('网络异常,请稍后重试');
return;
} if (data.status == 200) {
$api.css($api.byId('show_img'), 'background: url(' + data.data + ') center no-repeat; background-size: cover;');
$api.attr($api.byId('show_img'), 'data-img', data.data);
} else {
$api.showToast(data.info);
}
});
};

apicloud图片上传的更多相关文章

  1. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  2. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  4. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  5. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  6. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  7. TinyMCE的使用(包括汉化及本地图片上传功能)

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

  8. 包含修改字体,图片上传等功能的文本输入框-Bootstrap

    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...

  9. PHP多图片上传实例demo

    upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. Object Detection: To Be Higher Accuracy and Faster

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51597496 在深度学习中有一类研究热 ...

  2. springcloud(十一):服务网关Zuul高级篇

    时间过的很快,写springcloud(十):服务网关zuul初级篇还在半年前,现在已经是2018年了,我们继续探讨Zuul更高级的使用方式. 上篇文章主要介绍了Zuul网关使用模式,以及自动转发机制 ...

  3. JDK(Java Development Kit)内置常用自带工具一览(转)

    注意:可能随着JDK的版本升级,工具也会随着增多. JDK(Java Development Kit)是Java程序员最核心的开发工具,没有之一. JDK是一个功能强大的Java开发套装,它不仅仅为我 ...

  4. hdu 1010 Tempter of the Bone (奇偶性剪枝)

    题意:有一副二维地图'S'为起点,'D'为终点,'.'是可以行走的,'X'是不能行走的.问能否只走T步从S走到D? 题解:最容易想到的就是DFS暴力搜索,,但是会超时...=_=... 所以,,要有其 ...

  5. leetcode中,代码怎样调试,创造本地执行环境

    初次接触leetcode,是我在一个招聘站点上看的,这个OJ真有那么厉害吗? 这几天在这个OJ上做了几道题,发现他的几个特点,1.题目不难(相对于ACM来说,我被ACM虐到至今无力),评判没那么苛刻, ...

  6. android自带的处理Bitmap out Memory 的处理,我仅仅是改变了些写法成为自己用的东西

    每天上万次的启动载入证明这个载入是不错的; 第三方的载入框架非常多,推荐使用成熟框架,比方大家都知道的ImageLoad等, 这里的仅仅供学习; 我也曾在一个菜谱的项目里写过载入手机相冊图片的,只是当 ...

  7. js面试题--------JS中数字和字符,布尔类型相加相减问题

    JS中数字和字符相加相减问题 <html lang="en"> <head> <meta charset="utf-8" /> ...

  8. 启动VIP报CRS-1028/CRS-0223致使VIP状态为UNKNOWN故障分析与解决

    CRS版本号为10.2.0.4 1.VIP State为UNKNOWN [root@XXdb1 ~]# crs_stat -t Name           Type           Target ...

  9. git 拉取和获取 pull 和 fetch 区别【转】

    本文转载自:http://blog.csdn.net/u010094934/article/details/52775653 使用git  直接提交的话   直接 push 获取最新版本  有两种   ...

  10. OTA升级中关于update.zip包的一些总结【转】

    本文转载自:http://429564140.iteye.com/blog/2337165 update.zip包整理 一. update.zip包的目录结构           |----boot. ...