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

使用:

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

前端代码

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

js数据处理

  1. apiready = function(){
  2. UIMediaScanner = api.require('UIMediaScanner');
  3. };
  4. //上传照片
  5. //使用本模块前需在云编译页面添加勾选访问相册权限,否则会有崩溃闪退现象
  6. var UIMediaScanner = null;
  7. function chooseImg() {
  8. api.actionSheet({
  9. cancelTitle: '取消',
  10. buttons: ['拍照', '从手机相册选择']
  11. }, function(ret, err) {
  12. var index = ret.buttonIndex;
  13. if (index == 1) {
  14. api.getPicture({
  15. sourceType: 'camera',
  16. encodingType: 'jpg',
  17. mediaValue: 'pic',
  18. destinationType: 'url',
  19. quality: 40,
  20. saveToPhotoAlbum: true
  21. }, function(ret, err) {
  22. if (ret) {
  23. updateImg(ret.data);
  24. }
  25. });
  26. } else if (index == 2) {
  27. UIMediaScanner.open({
  28. type : 'picture',
  29. column : 4,
  30. max : 1,
  31. sort : {
  32. key : 'time',
  33. order : 'desc'
  34. },
  35. texts : {
  36. stateText : '选择图片',
  37. cancelText : '取消',
  38. finishText : '完成'
  39. },
  40. styles : {
  41. bg : '#fff', //资源器背景
  42. mark : { //选中图片后的,对号
  43. icon : '',
  44. position : 'bottom_left', //位置
  45. size : 30 //大小
  46. },
  47. nav : {
  48. bg : '#fff',
  49. stateColor : '#56b7e1',
  50. stateSize : 18,
  51. cancelBg : 'rgba(0,0,0,0)',
  52. cancelColor : '#56b7e1',
  53. cancelSize : 15,
  54. finishBg : 'rgba(0,0,0,0)',
  55. finishColor : '#56b7e1',
  56. finishSize : 15
  57. }
  58. },
  59. exchange : true
  60. }, function(ret, err) {
  61. if (ret) {
  62. //transPath 图片 转换徐调用
  63. UIMediaScanner.transPath({
  64. //图片的路径
  65. path : ret.list[0].path
  66. }, function(ret, err) {
  67. if (ret) {
  68. updateImg(ret.path);
  69. } else {
  70. $api.showToast('图片转换出错,请重新选择');
  71. }
  72. });
  73. }
  74. });
  75. }
  76. });
  77. };
  78.  
  79. // 上传图片
  80. function updateImg(path) {
  81. api.showProgress({
  82. title : ' ',
  83. text : '正在上传...',
  84. modal : true
  85. });
  86. api.ajax({
  87. url : MainUrl + 'User&a=upload_img',
  88. method : 'post',
  89. timeout : 60,
  90. dataType : 'json',
  91. returnAll : false,
  92. data : {
  93. files : {
  94. 'images' : path
  95. }
  96. }
  97. }, function(data, err) {
  98. api.hideProgress();
  99. if (err) {
  100. $api.showToast('网络异常,请稍后重试');
  101. return;
  102. }
  103.  
  104. if (data.status == 200) {
  105. $api.css($api.byId('show_img'), 'background: url(' + data.data + ') center no-repeat; background-size: cover;');
  106. $api.attr($api.byId('show_img'), 'data-img', data.data);
  107. } else {
  108. $api.showToast(data.info);
  109. }
  110. });
  111. };

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. [国家集训队2012]JZPFAR

    [国家集训队2012]JZPFAR 题目 平面上有n个点.现在有m次询问,每次给定一个点(px, py)和一个整数k,输出n个点中离(px, py)的距离第k大的点的标号.如果有两个(或多个)点距离( ...

  2. Linux I/O scheduler for solid-state drives

    An I/O scheduler and a method for scheduling I/O requests to a solid-state drive (SSD) is disclosed. ...

  3. Grails用CONSOLE测试,比写集成测试还快

    一般,这个可以用过开发当中的脚本测试吧. 如果正规的开发流程里,集成测试显然可以作为报告提交,必不可少.

  4. Linux(1):fork函数

    ps:每一篇博客不过为了记录学习的过程,并反思总结,如有错误,还望指正. 函数原型:extern __pid_t fork (void) __THROWNL; 该函数包括于头文件unistd.h中. ...

  5. HDU 4525

    也是水题了,不过注意负负也可以为正就好了. 今天看见bestcoder上的人那么厉害,唉,我什么时候才能赶上啊.. #include <iostream> #include <cst ...

  6. Sahara中的数据模型

    声明: 本博客欢迎转载.但请保留原作者信息,并请注明出处! 作者:郭德清 团队:华为杭州OpenStack团队 本文主要是介绍下Sahara中一些常见的数据模型. 1.Config 用于描写叙述配置信 ...

  7. c# POST和GET方式通过server地址提交数据

    1:POST方式提交: <strong><span style="font-size:14px;">private static string HttpPo ...

  8. Jemeter命令执行

    http://mp.weixin.qq.com/s?__biz=MzAxOTg2NDUyOA==&mid=2657555034&idx=1&sn=9e6a3fbd5eed859 ...

  9. B1232 [Usaco2008Nov]安慰奶牛cheer 最小生成树

    %%%小詹太巨啦!!!我就想直接最小生成树之后建树跑dfs,然后写跪了...然后看小詹博客之后恍然大悟,原来直接把边权改为w * 2 + 两边点权值就行了. 但是还是不对,为什么呢?原来我们起点走了三 ...

  10. bzoj 1191 [ HNOI 2006 ] 超级英雄Hero —— 二分图匹配

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1191 就是二分图匹配的裸题: 注意题目要求是第一次匹配失败就退出!没仔细看题差点丢失1A. ...