HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传，利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。Storage模块管理应用本地数据存储区，用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同，前者可在应用内跨域操作，数据存储期是持久化的，并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据，数据格式符合Multipart/form-data规范，即rfc1867（Form-based File Upload in HTML）协议。

拍照或相册选取一张demo下载地址：http://pan.baidu.com/s/1cqnSNs

拍照或相册选取多张demo下载地址：http://pan.baidu.com/s/1o7UQHxo

  1. <!doctype html>
  2. <html class="feedback">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  6.         <meta name="misapplication-tap-highlight" content="no" />
  7.         <meta name="HandheldFriendly" content="true" />
  8.         <meta name="MobileOptimized" content="" />
  9.         <title>HTML5 Plus 拍照或者相册选择图片上传</title>
  10.         <link rel="stylesheet" href="../../css/mui.min.css">
  11.         <link rel="stylesheet" type="text/css" href="../../css/app.css" />
  12.         <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
  13.         <link rel="stylesheet" type="text/css" href="../../css/feedback-page.css" />
  14.         <link rel="stylesheet" href="../../css/font-awesome.min.css">
  15.         <script src="../../js/jquery.js"></script>
  16.         <script type="text/javascript" src="../../js/common.js"></script>
  17.         <script type="text/javascript" src="../../js/utitls.js"></script>
  18.         <style type="text/css">
  19.             .del {
  20.                 position: absolute;
  21.                 top:1px;
  22.                 right: 1px;
  23.                 display: block;
  24.              line-height: ;
  25.                 cursor: pointer;
  26.                 color:#fff;
  27.                 }  
  28.  
  29.             .del:hover {
  30.                 color:#ff3333;
  31.             }
  32.         </style>
  33.         <style>
  34.             .table-view {
  35.                 position: relative;
  36.                 margin-top: ;
  37.                 margin-bottom: ;
  38.                 padding-left: ;
  39.                 list-style: none;
  40.                 background-color: #f5f5f5;
  41.             }  
  42.  
  43.             .table-view-cell {
  44.                 position: relative;
  45.                 overflow: hidden;
  46.                 padding: 0px 15px;
  47.                 -webkit-touch-callout: none;
  48.                 margin-bottom: 1px;
  49.             }  
  50.  
  51.             .table-view-cell:after {
  52.                 position: absolute;
  53.                 right: ;
  54.                 bottom: ;
  55.                 left: 0px;
  56.                 height: 1px;
  57.                 content: '';
  58.                 -webkit-transform: scaleY(.);
  59.                 transform: scaleY(.);
  60.                 background-color: #c8c7cc;
  61.             }  
  62.  
  63.             .table-view-cell>a:not(.btn) {
  64.                 position: relative;
  65.                 display: block;
  66.                 overflow: hidden;
  67.                 margin: -0px -15px;
  68.                 padding: inherit;
  69.                 white-space: nowrap;
  70.                 text-overflow: ellipsis;
  71.                 color: inherit;
  72.                 background-color: #75b9f4;
  73.                 height: 40px;
  74.                 line-height: 40px;
  75.             }  
  76.  
  77.             .navigate-right:after
  78.             {
  79.                 font-family: Muiicons;
  80.                 font-size: inherit;
  81.                 line-height: ;
  82.                 position: absolute;
  83.                 top: %;
  84.                 display: inline-block;
  85.                 -webkit-transform: translateY(-%);
  86.                 transform: translateY(-%);
  87.                 text-decoration: none;
  88.                 color: #;
  89.                 -webkit-font-smoothing: antialiased;
  90.             }  
  91.  
  92.             .table-view-cell.collapse .collapse-content {
  93.                 position: relative;
  94.                 display: none;
  95.                 overflow: hidden;
  96.                 margin: 0px -15px 0px;
  97.                 padding: 0px 0px !important;
  98.                 -webkit-transition: height .35s ease;
  99.                 -o-transition: height .35s ease;
  100.                 transition: height .35s ease;
  101.                 background-color: transparent;
  102.             }
  103.             .image-item{
  104.                 position: relative;
  105.             }
  106.             .image-item .info{
  107.                 position: absolute;
  108.                 top:0px;
  109.                 left:4px;
  110.                 color: #ff9900;
  111.                 font-size: 12px;                          
  112.  
  113.             }
  114.         </style>
  115.     </head>
  116.     <body>
  117.         <header class="bar bar-nav">
  118.             <h1 class="title">拍照或者相册选择图片上传</h1>
  119.         </header>
  120.         <div class="content">
  121.             <div style="margin-top: 10px;"></div>
  122.             <input type="hidden" id="ckjl.id" name="ckjl.id" value="">
  123.                     <div class="collapse-content" >
  124.                         <form>
  125.                             <label class="row-label"></label>
  126.                             <div id='F_CKJLBS' class="row image-list">
  127.                                 <div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div>
  128.                         </div>
  129.                         </form>
  130.                     </div>
  131.         </div>
  132.         <script src="../../js/mui.min.js"></script>
  133. <script>
  134.     var procinstid = ;
  135.     //初始化页面执行操作
  136.     function plusReady() {
  137.         //Android返回键监听事件
  138.         plus.key.addEventListener('backbutton',function(){
  139.             myclose();
  140.         },false);
  141.     }
  142.     if (window.plus) {
  143.         plusReady();
  144.     } else {
  145.         document.addEventListener('plusready', plusReady, false);
  146.     }
  147.         //加载页面初始化需要加载的图片信息
  148.         function showImgDetail (imgId,imgkey,id,src) {
  149.             var html = "";
  150.             html +='<div  id="Img'+imgId+imgkey+'" class="image-item ">';
  151.             html +='    <img id="picBig" data-preview-src="" data-preview-group="1" '+src+'/>';
  152.             html +='    <span class="del" onclick="delImg(\''+imgId+'\',\''+imgkey+'\','+id+');">';
  153.             html +='        <div class="fa fa-times-circle"></div>';
  154.             html +='    </span>';
  155.             html +='</div>';
  156.             $("#"+imgkey+"S").append(html);
  157.         }
  158.         //删除图片
  159.         function delImg(imgId,imgkey,id){
  160.             var bts = ["是", "否"];
  161.             plus.nativeUI.confirm("是否删除图片？", function(e) {
  162.                     var i = e.index;
  163.                     if (i == ) {
  164.                         var itemname=id+"img-"+imgkey;
  165.                         var itemvalue=plus.storage.getItem(itemname);
  166.                         if(itemvalue!=null){
  167.                             var index=itemvalue.indexOf(imgId+",");
  168.                             if(index==-){//没有找到
  169.                                 delImgfromint(imgId,imgkey,id,index);
  170.                             }else{
  171.                                 delImgFromLocal(itemname,itemvalue,imgId,imgkey,index); //修改，加了一个index参数
  172.                             }  
  173.  
  174.                         }else{
  175.                             delImgfromint(imgId,imgkey,id);
  176.                         }
  177.                     }
  178.                 },"查勘", bts);
  179.             /*var isdel = confirm("是否删除图片？");
  180.             if(isdel == false){
  181.                 return;
  182.             }*/  
  183.  
  184.         }
  185.         function delImgFromLocal(itemname,itemvalue,imgId,imgkey,index){
  186.                     var wa = plus.nativeUI.showWaiting();
  187.                     var left=itemvalue.substr(,index-);
  188.                     var right=itemvalue.substring(index,itemvalue.length);
  189.                     var end=right.indexOf("}");
  190.                     right=right.substring(end+,right.length);
  191.                     var newitem=left+right;
  192.                     plus.storage.setItem(itemname,newitem);
  193.                     myAlert("删除成功");
  194.                     $("#Img"+imgId+imgkey).remove();
  195.                     wa.close();
  196.         }
  197.         //选取图片的来源，拍照和相册
  198.         function showActionSheet(conf){
  199.           var divid = conf.id;
  200.               var actionbuttons=[{title:"拍照"},{title:"相册选取"}];
  201.               var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};
  202.               plus.nativeUI.actionSheet(actionstyle, function(e){
  203.                     if(e.index==){
  204.                         getImage(divid);
  205.                     }else if(e.index==){
  206.                         galleryImg(divid);
  207.                     }
  208.               } );
  209.                }
  210.         //相册选取图片
  211.               function galleryImg(divid) {
  212.                  plus.gallery.pick( function(p){
  213.                      plus.io.resolveLocalFileSystemURL(p, function(entry) {
  214.                     compressImage(entry.toLocalURL(),entry.name,divid);
  215.                 }, function(e) {
  216.                     plus.nativeUI.toast("读取拍照文件错误：" + e.message);
  217.                 });
  218.                  }, function ( e ) {
  219.                  }, {
  220.                 filename: "_doc/camera/",
  221.                 filter:"image"
  222.                  } );
  223.               }
  224.         // 拍照
  225.         function getImage(divid) {
  226.             var cmr = plus.camera.getCamera();
  227.             cmr.captureImage(function(p) {
  228.                 plus.io.resolveLocalFileSystemURL(p, function(entry) {
  229.                     compressImage(entry.toLocalURL(),entry.name,divid);
  230.                 }, function(e) {
  231.                     plus.nativeUI.toast("读取拍照文件错误：" + e.message);
  232.                 });
  233.             }, function(e) {
  234.             }, {
  235.                 filename: "_doc/camera/",
  236.                 index:
  237.             });
  238.         }
  239.         //压缩图片
  240.         function compressImage(url,filename,divid){
  241.             var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg
  242.             plus.zip.compressImage({
  243.                     src:url,//src: (String 类型 )压缩转换原始图片的路径
  244.                     dst:name,//压缩转换目标图片的路径
  245.                     quality:,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100
  246.                     overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件
  247.                 },
  248.                 function(event) {
  249.                     //uploadf(event.target,divid);
  250.                     var path = name;//压缩转换目标图片的路径
  251.                     //event.target获取压缩转换后的图片url路
  252.                     //filename图片名称
  253.                     saveimage(event.target,divid,filename,path);
  254.                 },function(error) {
  255.                     plus.nativeUI.toast("压缩图片失败，请稍候再试");
  256.             });
  257.         }
  258.         //保存信息到本地
  259.         /**
  260.          *
  261.          * @param {Object} url  图片的地址
  262.          * @param {Object} divid  字段的名称
  263.          * @param {Object} name   图片的名称
  264.          */
  265.         function saveimage(url,divid,name,path){
  266.             var  state=;
  267.             var wt = plus.nativeUI.showWaiting();
  268.           //  plus.storage.clear();
  269.             name=name.substring(,name.indexOf("."));
  270.             var id = document.getElementById("ckjl.id").value;
  271.             var itemname=id+"img-"+divid;
  272.             var itemvalue=plus.storage.getItem(itemname);
  273.             if(itemvalue==null){
  274.                 itemvalue="{"+name+","+path+","+url+"}";
  275.             }else{
  276.                 itemvalue=itemvalue+"{"+name+","+path+","+url+"}";
  277.             }
  278.             plus.storage.setItem(itemname, itemvalue);  
  279.  
  280.             var src = 'src="'+url+'"';
  281.             //alert("itemvalue="+itemvalue);
  282.             showImgDetail(name,divid,id,src);
  283.             wt.close();  
  284.  
  285.         }
  286.         //上传图片，实例中没有添加上传按钮
  287.         function uploadimge(agree,back) {
  288.         //plus.storage.clear();
  289.          var wa = plus.nativeUI.showWaiting();
  290.          var DkeyNames=[];
  291.          var id = document.getElementById("ckjl.id").value;
  292.          var length=id.toString().length;
  293.          var idnmae=id.toString();
  294.          var numKeys=plus.storage.getLength();
  295.          var task = plus.uploader.createUpload('http://demo.dcloud.net.cn/helloh5/uploader/upload.php', {
  296.                                 method: "POST"
  297.                             },
  298.                             function(t, status) {
  299.                                 if (status == ) {
  300.                                     console.log("上传成功");
  301.                                 } else {
  302.                                     wa.close();
  303.                                     console.log("上传失败");
  304.                                 }
  305.                             }
  306.                         );
  307.             task.addData("id",id);
  308.             for(var i=; i<imgArray.length;i++){
  309.                 var itemkey=id+"img-"+imgArray[i];
  310.                 if(plus.storage.getItem(itemkey)!=null){
  311.                     var itemvalue=plus.storage.getItem(itemkey).split("{");
  312.                     for(var img=;img<itemvalue.length;img++){
  313.                         var imgname=itemvalue[img].substr(,itemvalue[img].indexOf(","));
  314.                         var imgurl=itemvalue[img].substring(itemvalue[img].indexOf(",")+,itemvalue[img].lastIndexOf(","));
  315.                         task.addFile(imgurl,{key:imgurl});
  316.                     }
  317.                 }
  318.             }
  319.             task.start();  
  320.  
  321.         }
  322. </script>
  323. </body>
  324. </html>

原文：http://blog.csdn.net/qq_27626333/article/details/51896616

HTML5 Plus 拍照或者相册选择图片上传的更多相关文章

  1. Ionic3学习笔记（十二）拍照上传图片以及从相册选择图片上传

    本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...

  2. IOS网络第五天 AFN-02-文件上传，底部弹出窗体，拍照和相册获取图片上传

    ************** #import "HMViewController.h" #import "AFNetworking.h" @interface ...

  3. HTML5 开发APP(打开相册以及图片上传)

    我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图 基本功能是 ...

  4. mui + H5 调取摄像头和相册 实现图片上传

    最近要用MUI做项目,在研究图片上传时 ,遇到了大坑 ,网上搜集各种资料,最终写了一个demo,直接看代码.参考(http://www.cnblogs.com/richerdyoung/p/66123 ...

  5. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  6. android拍照选择图片上传服务器自定义控件

    做android项目的时候总免不了遇到图片上传功能,虽然就是调用android系统的拍照和相册选择功能,但是总面部了把一大推代码写在activity里,看上去一大推代码头都昏了.不如把这些功能都集成一 ...

  7. H5拍照、选择图片上传组件核心

    背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...

  8. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  9. Ionic 选择图片上传

    1.添加插件 1.1 安装ngcordova 1.2 安装选择图片插件 1.3 安装上传插件 1.4查看安装插件集合 2.html 代码 <div class="item item-i ...

随机推荐

  1. 解决idea工具下tomcat中文乱码问题

    在运行/调试 配置对话框的Startup/Connection面板中, 勾选Pass environment variables. 并添加一个environment variable, Name填 J ...

  2. (转载)【cocos2dx 3.x Lua] 注册事件函数详解

    出处: http://www.2cto.com/kf/201409/338235.html coocs2dx 版本 3.1.1 registerScriptTouchHandler 注册触屏事件 re ...

  3. Django 连接redis方法

    1. 按照redis模块 # 在cmd中 pip3 install redis 2. 测试代码 插入单挑数据 import redis conn = redis.Redis(host='10.0.0. ...

  4. glob.glob()、os.path.split()函数、global和nonlocal关键字

    1. glob.glob() glob模块是Python最简单的模块之一, 内容非常少, 用它可以查找符合特定规则的文件路径名, 查找文件时只会用到三个匹配符: * :匹配0个或多个字符 ? : 匹配 ...

  5. numpy 中clip函数的使用

    其中a是一个数组,后面两个参数分别表示最小和最大值 也就是说clip这个函数将将数组中的元素限制在a_min, a_max之间,大于a_max的就使得它等于 a_max,小于a_min,的就使得它等于 ...

  6. selenium webdriver模拟鼠标键盘操作

    在测试使用Selenium webdriver测试WEB系统的时候,用到了模拟鼠标.键盘的一些输入操作. 1.鼠标的左键点击.双击.拖拽.右键点击等: 2.键盘的回车.回退.空格.ctrl.alt.s ...

  7. OO第三次阶段性总结

    一.规格化设计的历史以及人们重视的原因 发展历史 从20世纪60年代开始,就存在着许多不同的形式规格说明语言和软件开发方法.在形式规格说明领域一些最主要的发展过程列举如下: 1969-1972 C.A ...

  8. kali linux安装及配置

    kali linux用户名:root 密码:之前设置过的密码 --------------------------------------------------------------------- ...

  9. 【笔记】DataTable或IList使用GroupBy方法的lamda表达式

    DataTable GroupBy的用法 var result = dt.AsEnumerable(). GroupBy(g => new { StaffID = g.Field<stri ...

  10. 公司里面用的iTextSharp（教程）---简介

    一.需求: 公司这次要做一个生成PDF的功能,需要设计,刚刚进入公司,组长把任务分配给了我,为了完成这个任务,苦学了许久的iTextSharp.现在记录下实现过程中了了解的一些东东,一起分享哈~~ 二 ...