在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例HTML基础 → HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传

HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传

HTML基础

下载此实例
  • 开发语言:CSS
  • 实例大小:0.28M
  • 下载次数:116
  • 浏览次数:2719
  • 发布时间:2018-11-22
  • 实例类别:HTML基础
  • 发 布 人:yyxt185
  • 文件格式:.rar
  • 所需积分:2
 相关标签: 相册 拍照

实例介绍

【实例截图】利用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)协议。

【实例截图】

from clipboard

【核心代码】


<!doctype html>  
<html class="feedback">  
    <head>  
        <meta charset="utf-8" />  
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />  
        <meta name="misapplication-tap-highlight" content="no" />  
        <meta name="HandheldFriendly" content="true" />  
        <meta name="MobileOptimized" content="320" />  
        <title>HTML5 Plus 拍照或者相册选择图片上传</title>  
        <link rel="stylesheet" href="css/mui.min.css">  
        <link rel="stylesheet" type="text/css" href="css/app.css" />  
        <link rel="stylesheet" type="text/css" href="css/iconfont.css" />  
        <link rel="stylesheet" type="text/css" href="css/feedback-page.css" />  
        <link rel="stylesheet" href="css/font-awesome.min.css">  
        <script src="js/jquery.js"></script>  
        <script type="text/javascript" src="js/common.js"></script>  
        <script type="text/javascript" src="js/utitls.js"></script>  
        <style type="text/css">  
            .del {  
                position: absolute;  
                top:1px;  
                right: 1px;   
                display: block;        
             line-height: 1;  
                cursor: pointer;  
                color:#fff;  
                }  
  
            .del:hover {  
                color:#ff3333;  
            }  
        </style>  
        <style>  
            .table-view {  
                position: relative;  
                margin-top: 0;  
                margin-bottom: 0;  
                padding-left: 0;  
                list-style: none;  
                background-color: #f5f5f5;  
            }  
              
            .table-view-cell {  
                position: relative;  
                overflow: hidden;  
                padding: 0px 15px;  
                -webkit-touch-callout: none;  
                margin-bottom: 1px;  
            }  
              
            .table-view-cell:after {  
                position: absolute;  
                right: 0;  
                bottom: 0;  
                left: 0px;  
                height: 1px;  
                content: '';  
                -webkit-transform: scaleY(.5);  
                transform: scaleY(.5);  
                background-color: #c8c7cc;  
            }  
              
            .table-view-cell>a:not(.btn) {  
                position: relative;  
                display: block;  
                overflow: hidden;  
                margin: -0px -15px;  
                padding: inherit;  
                white-space: nowrap;  
                text-overflow: ellipsis;  
                color: inherit;  
                background-color: #75b9f4;  
                height: 40px;  
                line-height: 40px;  
            }  
              
            .navigate-right:after  
            {  
                font-family: Muiicons;  
                font-size: inherit;  
                line-height: 1;  
                position: absolute;  
                top: 50%;  
                display: inline-block;  
                -webkit-transform: translateY(-50%);  
                transform: translateY(-50%);  
                text-decoration: none;  
                color: #666;  
                -webkit-font-smoothing: antialiased;  
            }  
              
            .table-view-cell.collapse .collapse-content {  
                position: relative;  
                display: none;  
                overflow: hidden;  
                margin: 0px -15px 0px;  
                padding: 0px 0px !important;  
                -webkit-transition: height .35s ease;  
                -o-transition: height .35s ease;  
                transition: height .35s ease;  
                background-color: transparent;  
            }  
            .image-item{  
                position: relative;  
            }  
            .image-item .info{  
                position: absolute;  
                top:0px;  
                left:4px;  
                color: #ff9900;  
                font-size: 12px;                          
                  
            }  
        </style>  
    </head>  
    <body>  
        <header class="bar bar-nav">  
            <h1 class="title">拍照或者相册选择图片上传</h1>  
        </header>  
        <div class="content">  
            <div style="margin-top: 10px;"></div>  
            <input type="hidden" id="ckjl.id" name="ckjl.id" value="429">  
                    <div class="collapse-content" >  
                        <form>  
                            <label class="row-label"></label>  
                            <div id='F_CKJLBS' class="row image-list">  
                                <div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div>  
                        </div>  
                        </form>  
                    </div>  
        </div>  
        <script src="js/mui.min.js"></script>  
<script>  
    var procinstid = 0;  
    //初始化页面执行操作  
    function plusReady() {  
        //Android返回键监听事件  
        plus.key.addEventListener('backbutton',function(){  
            myclose();  
        },false);  
    }  
    if (window.plus) {  
        plusReady();  
    } else {  
        document.addEventListener('plusready', plusReady, false);  
    }  
        //加载页面初始化需要加载的图片信息  
        //或者相册IMG_20160704_112620.jpg  
        //imgId:图片名称:1467602809090或者IMG_20160704_112620  
        //imgkey:字段例如:F_ZDDZZ  
        //ID:站点编号ID,例如429  
        //src:src="file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/upload/F_ZDDZZ-1467602809090.jpg"  
        function showImgDetail (imgId,imgkey,id,src) {    
            var html = "";  
            html  ='<div  id="Img' imgId imgkey '" class="image-item ">';   
            html  ='    <img id="picBig" data-preview-src="" data-preview-group="1" ' src '/>';  
            html  ='    <span class="del" onclick="delImg(\'' imgId '\',\'' imgkey '\',' id ');">';         
            html  ='        <div class="fa fa-times-circle"></div>';      
            html  ='    </span>';   
            html  ='</div>';  
            $("#" imgkey "S").append(html);  
        }  
        //删除图片  
        //imgId:图片名称:IMG_20160704_112614  
        //imgkey:字段,例如F_ZDDZZ  
        //ID:站点编号ID,例如429  
        function delImg(imgId,imgkey,id){  
            var bts = ["是", "否"];  
            plus.nativeUI.confirm("是否删除图片?", function(e) {  
                    var i = e.index;  
                    if (i == 0) {  
                        var itemname=id "img-" imgkey;//429img-F_ZDDZZ  
                        var itemvalue=plus.storage.getItem(itemname);  
                        //{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}  
                        if(itemvalue!=null){  
                            var index=itemvalue.indexOf(imgId ",");  
                            if(index==-1){//没有找到  
                                delImgfromint(imgId,imgkey,id,index);  
                            }else{   
                                delImgFromLocal(itemname,itemvalue,imgId,imgkey,index); //修改,加了一个index参数  
                            }  
                              
                        }else{  
                            delImgfromint(imgId,imgkey,id);   
                        }  
                    }  
                },"查勘", bts);  
            /*var isdel = confirm("是否删除图片?");  
            if(isdel == false){  
                return;  
            }*/  
              
              
        }  
        function delImgFromLocal(itemname,itemvalue,imgId,imgkey,index){  
                    var wa = plus.nativeUI.showWaiting();  
                    var left=itemvalue.substr(0,index-1);  
                    var right=itemvalue.substring(index,itemvalue.length);  
                    var end=right.indexOf("}");  
                    right=right.substring(end 1,right.length);  
                    var newitem=left right;  
                    plus.storage.setItem(itemname,newitem);   
                    //myAlert("删除成功");  
                    $("#Img" imgId imgkey).remove();  
                    wa.close();  
        }  
        //选取图片的来源,拍照和相册  
        function showActionSheet(conf){  
              var divid = conf.id;  
              var actionbuttons=[{title:"拍照"},{title:"相册选取"}];  
              var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};  
              plus.nativeUI.actionSheet(actionstyle, function(e){  
                    if(e.index==1){  
                        getImage(divid);  
                    }else if(e.index==2){  
                        galleryImg(divid);  
                    }  
              } );  
        }  
        //相册选取图片  
        function galleryImg(divid) {  
            plus.gallery.pick( function(p){  
                //alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg  
                plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                    //alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg  
                    //alert(entry.name);//IMG_20160704_112620.jpg  
                    compressImage(entry.toLocalURL(),entry.name,divid);  
                }, function(e) {  
                    plus.nativeUI.toast("读取拍照文件错误:"   e.message);  
                });  
            }, function ( e ) {  
            }, {  
                filename: "_doc/camera/",  
                filter:"image"  
            } );  
        }  
        // 拍照  
        function getImage(divid) {  
            var cmr = plus.camera.getCamera();  
            cmr.captureImage(function(p) {  
                //alert(p);//_doc/camera/1467602809090.jpg  
                plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                    //alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg  
                    //alert(entry.name);//1467602809090.jpg  
                    compressImage(entry.toLocalURL(),entry.name,divid);  
                }, function(e) {  
                    plus.nativeUI.toast("读取拍照文件错误:"   e.message);  
                });  
            }, function(e) {  
            }, {  
                filename: "_doc/camera/",  
                index: 1  
            });  
        }  
        //压缩图片  
        function compressImage(url,filename,divid){  
            var name="_doc/upload/" divid "-" filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg  
            plus.zip.compressImage({  
                    src:url,//src: (String 类型 )压缩转换原始图片的路径  
                    dst:name,//压缩转换目标图片的路径  
                    quality:20,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100  
                    overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件  
                },  
                function(event) {   
                    //uploadf(event.target,divid);  
                    var path = name;//压缩转换目标图片的路径  
                    //event.target获取压缩转换后的图片url路  
                    //filename图片名称  
                    saveimage(event.target,divid,filename,path);  
                },function(error) {  
                    plus.nativeUI.toast("压缩图片失败,请稍候再试");  
            });  
        }  
        //保存信息到本地  
        /**  
         *   
         * @param {Object} url  图片的地址  
         * @param {Object} divid  字段的名称  
         * @param {Object} name   图片的名称  
         */  
        function saveimage(url,divid,name,path){  
            //alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg  
            //alert(path);//_doc/upload/F_ZDDZZ-1467602809090.jpg  
            var  state=0;  
            var wt = plus.nativeUI.showWaiting();  
          //  plus.storage.clear();   
            name=name.substring(0,name.indexOf("."));//图片名称:1467602809090  
            var id = document.getElementById("ckjl.id").value;  
            var itemname=id "img-" divid;//429img-F_ZDDZ  
            var itemvalue=plus.storage.getItem(itemname);  
            if(itemvalue==null){  
                itemvalue="{" name "," path "," url "}";//{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}  
            }else{    
                itemvalue=itemvalue "{" name "," path "," url "}";  
            }  
            plus.storage.setItem(itemname, itemvalue);  
              
            var src = 'src="' url '"';  
            //alert("itemvalue=" itemvalue);  
            showImgDetail(name,divid,id,src);  
            wt.close();  
              
        }  
        //上传图片,实例中没有添加上传按钮  
        function uploadimge(agree,back) {  
        //plus.storage.clear();  
         var wa = plus.nativeUI.showWaiting();  
         var DkeyNames=[];  
         var id = document.getElementById("ckjl.id").value;   
         var length=id.toString().length;   
         var idnmae=id.toString();  
         var numKeys=plus.storage.getLength();  
         var task = plus.uploader.createUpload(getUrl()   'url', {  
                                method: "POST"  
                            },  
                            function(t, status) {  
                                if (status == 200) {  
                                    console.log("上传成功");  
                                     $.ajax({  
                                        type: "post",  
                                        url: getUrl()   'url',  
                                        data: {  
                                            taskId: taskId,  
                                            voteAgree: agree,  
                                            back: back,  
                                            voteContent: $("#assign").val(),  
                                        },  
                                        async: true,  
                                        dataType: "text",  
                                        success: function(data) {  
                                            wa.close();  
                                            goList(data);  
                                          
                                              
                                        },  
                                        error: function() {  
                                            wa.close();  
                                            myAlert("网络错误,提交审批失败,请稍候再试");  
                                        }  
                                    });  
                                       
                                      
                                } else {  
                                    wa.close();  
                                    console.log("上传失败");   
                                }  
                            }  
                        );  
            task.addData("id",id);  
            for(var i=0; i<imgArray.length;i  ){    
                var itemkey=id "img-" imgArray[i];  
                if(plus.storage.getItem(itemkey)!=null){  
                    var itemvalue=plus.storage.getItem(itemkey).split("{");  
                    for(var img=1;img<itemvalue.length;img  ){  
                        var imgname=itemvalue[img].substr(0,itemvalue[img].indexOf(","));  
                        var imgurl=itemvalue[img].substring(itemvalue[img].indexOf(",") 1,itemvalue[img].lastIndexOf(","));  
                        task.addFile(imgurl,{key:imgurl});  
                    }  
                }  
            }  
            task.start();  
              
        }  
</script>  
</body>  
</html>  


标签: 相册 拍照

实例下载地址

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警