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. 1066N !最右边非零数

    http://hi.baidu.com/nicker2010/item/4fa83c4c5050b3e5a4c066ec 另一个 Last non-zero Digit in N! Time Limi ...

  2. LightOJ - 1148 - Mad Counting

    先上题目: 1148 - Mad Counting   PDF (English) Statistics Forum Time Limit: 0.5 second(s) Memory Limit: 3 ...

  3. NTP-网络时间协议

    前言 搭建了一个linux虚拟机,发现跑着跑着时间有差异,查资料发现这个是正常的,因为系统时间和硬件时间是本地时间,会因各种原因导致跟标准时间UTC时间有差异,所以计算机界的牛人发明了NTP协议,专门 ...

  4. java 执行可执行文件时提示“could not find or load main class ”的问题

  5. 1366 xth 的第 12 枚硬币

    1366 xth 的第 12 枚硬币  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 传说 xth 曾 ...

  6. 【Ubuntu】基本操作 (条目=11)

    定义 NAME 为要操作的对象名 定义 DIR 为文件所在的绝对路径 所有操作默认在普通用户下进行 所有软件包默认是指Debian包(deb包) 1.查看进程 top 2.强制结束进程 PID由top ...

  7. Coder-Strike 2014

    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove? viewmode=contents    by---cxlove Qualification Round 略 Ro ...

  8. hdu 1532 Drainage Ditches(最大流)

                                                                                            Drainage Dit ...

  9. hdoj- Windows Message Queue

    Windows Message Queue Problem Description Message queue is the basic fundamental of windows system. ...

  10. PCB 周期计算采用 SQL 函数调用.net Dll 标量函数 实现

    PCB 周期计算采用 SQL函数调用.net Dll实现 (实现代码重用目的) 玩过SQL SERVER数据库经常经需要写存储过程,函数之类的,当业务逻辑过于复杂,用SQL去写简直是恶梦, 这里以PC ...