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

最近要用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 onclick="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 onclick="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 onclick="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 的调取摄像头和相册实现图片上传有什么好的想法，欢迎补充~~~~

mui + H5 调取摄像头和相册实现图片上传的更多相关文章

HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...
Hbuilder mui 相册拍照图片上传
http://www.bcty365.com/content-146-3648-1.html 使用流程弹出actionSheet /*点击头像触发*/ document.getElementById ...
HTML5 开发APP(打开相册以及图片上传)
我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图基本功能是 ...
IOS网络第五天 AFN-02-文件上传，底部弹出窗体，拍照和相册获取图片上传
************** #import "HMViewController.h" #import "AFNetworking.h" @interface ...
Ionic3学习笔记（十二）拍照上传图片以及从相册选择图片上传
本文为原创文章,转载请标明出处目录安装插件导入 app.module.ts 创建 provider 更多效果图 1. 安装插件终端运行: ionic cordova plugin add c ...
mui H5+ 调取相册拍照功能上传图片 + 裁剪功能
H5+ 相册拍照图片上传点击用户头像后,弹出actionSheet,选择从相册或是拍照:选取照片后调用上传方法: 上传图片后调用PhotoClip.js 插件进行裁剪具体流程弹出actionS ...
ios中摄像头/相册获取图片压缩图片上传服务器方法总结
本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下. 这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...
php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子
相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子包括五个部分: 一.相册首页 <html> <head> <meta charset="utf- ...
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
一.前言三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload), ...

随机推荐

Android Studio真机调试安装以后打开闪退，打包APK再安装正常打开没有问题
一直真机调试都没有问题, 但是有一次开始,真机调试正常安装没有问题,但是一打开就崩溃了一眨眼间就像被光闪了一下的那种. oppoR11调试会这样,但是用魅族试过没有问题, 报错出现过Android S ...
Node.js NPM Package.json
章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json Nod ...
Maven:Unable to import maven project: See logs for details
一.开发环境 idea2019.1 + apache-maven-3.6.2 + JDK 1.8.0_111 二.问题说明导入maven 多模块工程之后,发现工程没有多模块的展开,而且也没有在 Ex ...
SpringBoot 系列教程之编程式事务使用姿势介绍篇
SpringBoot 系列教程之编程式事务使用姿势介绍篇前面介绍的几篇事务的博文,主要是利用@Transactional注解的声明式使用姿势,其好处在于使用简单,侵入性低,可辨识性高(一看就知道使用 ...
Airflow 使用 Celery 时，如何添加 Celery 配置
背景前段时间我选用了 Airflow 对 wms 进行数据归档,在运行一段时间后,经常发现会报以下错误: [-- ::,: WARNING/ForkPoolWorker-] Failed opera ...
卷积神经网络应用于tensorflow手写数字识别（第三版）
import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data mnist = input_dat ...
身边的人工智能&人工智能发展史
智能家具扫地机器人智能音箱个人助手在线翻译谷歌翻译微软翻译 YouTube 视频翻译图像识别人脸识别 AI+摄像头下棋高手 Alphago 2017年打败柯洁成为世界第一 Alph ...
CodeForces - 748C Santa Claus and Robot
题意:机器人在网格线上行走,从p1点开始,沿最短路径到p2,再沿最短路径到p3,依此类推.在此过程中留下了行走的运动轨迹,由“RLDU”表示.问若只给出运动轨迹,求最少的pi点的个数. 分析:pi到p ...
18 12 28 css 浮动定位
浮动浮动特性 1.浮动元素有左浮动(float:left)和右浮动(float:right)两种 2.浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 3.相邻浮动的块元素可以并在一行, ...

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

mui + H5 调取摄像头和相册 实现图片上传的更多相关文章

随机推荐

热门专题

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

mui + H5 调取摄像头和相册实现图片上传的更多相关文章