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

最新推荐文章于 2021-06-07 19:35:57 发布

a15651769695

最新推荐文章于 2021-06-07 19:35:57 发布

阅读量402

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/THONLY/p/7239372.html

版权

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

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <title></title>  
       <link rel="stylesheet" href="css/mui.min.css" />
       <script type="text/javascript" src="js/jquery-1.8.1.js" ></script>
        <script type="text/javascript" src="js/mui.min.js" ></script>
        <style>  
            .imageup{ width:100px; height: 36px; line-height:36px;}  
            .button{  width:100px; height: 50px; line-height:50px;}  
            ul li p{
            	display: inline-block;
            }
        </style>  
    </head>  
    <body>  
    	<ul class="list">
    		<li class='mui-table-view-cell mui-media'>
    			 <img id="headimg" class="headimg" src=''  height="150"  width="150">
		        <p><a  class="imageup 1">上传图片1</a> </p> 
		        <p><button οnclick="upload();" class='button'> 提交</button></p>
    		</li>
    		<li class='mui-table-view-cell mui-media'>
    			 <img id="headimg" class="headimg" src=''  height="150"  width="150">
		        <p><a  class="imageup 2">上传图片2</a> </p> 
		        <p><button οnclick="upload();" class='button'> 提交</button></p>
    		</li>
    		<li class='mui-table-view-cell mui-media'>
    			 <img id="headimg" class="headimg" src=''  height="150"  width="150">
		        <p><a class="imageup 3">上传图片3</a> </p> 
		        <p><button οnclick="upload();" class='button'> 提交</button></p>
    		</li>
    	</ul>
       
        <script>  
                 
                 //扩展API完成后执行的操作
            	function plusReady(){                
                 //给选中的li增加判别class
                  	$(".list li").on("tap",".imageup",function(){
                 	alert('11');
                	var $li = $(this).parents("li");
                     console.log($($li).text())               	
                	$li.addClass("selectLi");
                	$li.siblings().removeClass("selectLi");               
					 page.imgUp();
	                })
	            }  
            
	            //弹出系统按钮选择框
	            var page=null;  
	            page={  
	                imgUp:function(){  
	                    var m=this;  
	                   /* console.log(m);*/
	                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
	                        {title:"拍照"},  
	                        {title:"从相册中选择"}  
	                    ]}, function(e){//1 是拍照  2 从相册中选择  
	                        switch(e.index){  
	                            case 1:appendByCamera();break;  
	                            case 2:appendByGallery();break;  
	                        }  
	                    });  
	                }  
	            }  
              
            // 拍照添加文件
            function appendByCamera(){
                plus.camera.getCamera().captureImage(function(e){
                    console.log("e is" +  e);
                    plus.io.resolveLocalFileSystemURL(e, function(entry) { 
	                    var path = entry.toLocalURL(); 
	                    var indexa = liIndex()
	                    console.log(indexa);
	                    $(".headimg")[indexa].src = path;                 
                    }, function(e) { 
                        mui.toast("读取拍照文件错误：" + e.message); 
                    }); 
    
                });    
            }
            // 从相册添加文件
            function appendByGallery(){
                plus.gallery.pick(function(path){
                	var indexa = liIndex();
                    console.log(indexa);
                    $(".headimg")[indexa].src = path; 
                });
            }
            
              
            //服务端接口路径
            var server = "http://www.test.cn/aaa.php";
            //获取图片元素
            var files = document.getElementById('headimg');
            // 上传文件
            function upload(){
                var wt=plus.nativeUI.showWaiting();
                var task=plus.uploader.createUpload(server,
                    {method:"POST"},
                    function(t,status){ //上传完成
                        if(status==200){
                            alert("上传成功："+t.responseText);
                            wt.close(); //关闭等待提示按钮
                        }else{
                            alert("上传失败："+status);
                            wt.close();//关闭等待提示按钮
                        }
                    }
                );   
                //添加其他参数
                task.addData("name","test");
                task.addFile(files.src,{key:"dddd"});
                task.start();
            }  
            
       
             
             //判断点击的是上传的第几个li              
             function liIndex(){
             	var lis = $(".list").children(); 
             	console.log(lis.length)
             	for(var i = 0; i < lis.length;i++){  
             		console.log($(lis[i]).attr("class"))
             		var lisClass = $(lis[i]).attr("class").split(" ");
             		if(lisClass[2] == "selectLi"){
            			console.log(i);
            			return i;
            		}
             	}
             }
            
            
          //扩展API是否准备好，如果没有准备好则监听plusReady  
         if(window.plus){
                plusReady();
            }else{
                document.addEventListener("plusready",plusReady,false);
            }
         
        </script>  
    </body>   
</html>

关键是最后，重点来了，普通浏览器里没有plus环境，只有HBuilder真机运行、打包后、或流应用环境下才能运行plus api。
也就是说我的上传图片的案例放在微信端是不执行的（我个人测出的结果，不代表绝对）。所以，我又赶（bu）紧(de)的(bu)改变了策略，去研究微信自带的调取摄像头和相册来实现图片上传功能，这个可以去看微信公众平台的开发者文档，内容都比较全。

最后，如果大家对mui 的调取摄像头和相册实现图片上传有什么好的想法，欢迎补充~~~~

转载于:https://www.cnblogs.com/THONLY/p/7239372.html

a15651769695

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mui + H5 调取摄像头和相册实现图片上传

最近要用MUI做项目，在研究图片上传时，遇到了大坑，网上搜集各种资料，最终写了一个demo，直接看代码。参考（http://www.cnblogs.com/richerdyoung/p/6612350.html）<!DOCTYPE html> <html> <head> <meta chars...
复制链接

扫一扫