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), ...
随机推荐
- 吴裕雄--天生自然C++语言学习笔记：C++ 运算符
运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C++ 内置了丰富的运算符,并提供了以下类型的运算符: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 杂项运算符 算术运算符 下表显示 ...
- skLearn 支持向量机
## 版权所有,转帖注明出处 章节 SciKit-Learn 加载数据集 SciKit-Learn 数据集基本信息 SciKit-Learn 使用matplotlib可视化数据 SciKit-Lear ...
- Spring 框架介绍
Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of Control – I ...
- python转换ascii码
字符转数字 ord("A") 数字转字符 chr(65)
- UVA - 11892 ENimEN（博弈）
题意:有n堆石子,两个人拿,拿走最后的石子的人赢,poopi先拿,条件是,每个人必须从另外一个人最后拿过的石子堆中取石子,若那堆石子被拿没了,才可以自由地拿其他堆.要求每次拿的石子数不能为0.问谁赢. ...
- UVA - 1605 Building for UN （联合国大楼）
题意:一个联合国大楼每层都有数量相等大小相同的格子,将其分配给n个国家,使任意两个不同的国家都相邻(同层有公共边或相邻层的同一个格子). 分析:可以设计一个只有两层的大楼,第一层每个国家占一行,第二层 ...
- 【redis】redis底层数据结构原理--简单动态字符串 链表 字典 跳跃表 整数集合 压缩列表等
redis有五种数据类型string.list.hash.set.zset(字符串.哈希.列表.集合.有序集合)并且自实现了简单动态字符串.双端链表.字典.压缩列表.整数集合.跳跃表等数据结构.red ...
- 目标检测算法的总结（R-CNN、Fast R-CNN、Faster R-CNN、YOLO、SSD、FNP、ALEXnet、RetianNet、VGG Net-16）
目标检测解决的是计算机视觉任务的基本问题:即What objects are where?图像中有什么目标,在哪里?这意味着,我们不仅要用算法判断图片中是不是要检测的目标, 还要在图片中标记出它的位置 ...
- 吴裕雄--天生自然TensorFlow2教程：数据加载
import tensorflow as tf from tensorflow import keras # train: 60k | test: 10k (x, y), (x_test, y_tes ...
- POJ 1017：Packets
Packets Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 47513 Accepted: 16099 Descrip ...