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), ...
随机推荐
- cf 1241 D. Sequence Sorting（思维）
题意: 一个序列有n个数,有一种操作,你可以选一个数x,使这个序列中等于x的数都移到序列头或尾. 问最少几次操作后,可以使这个序列非降序. 思路: (以下说bi移动到哪里,其实就是指a1……an中等于 ...
- 使用Linux系统，是一种什么体验？
导读 同事,从事嵌入式软件开发多年,主要开发环境用的就是linux,最疯狂的一段时间直接把系统装成linux系统,然后在linux下面虚拟一个windows操作系统,主要有些事情必须在windows才 ...
- [Mathematics][Fundamentals of Complex Analysis][Small Trick] The Trick on drawing the picture of sin(z), for z in Complex Plane
Exercises 3.2 21. (a). For $\omega = sinz$, what is the image of the semi-infinite strip $S_1 = \{x+ ...
- Python模块进阶、标准库、扩展库
模块进阶 Python有一套很有用的标准库(standard library).标准库会随着Python解释器,一起安装在你的电脑中的. 它是Python的一个组成部分.这些标准库是Python为你准 ...
- 数组空值empty
Array构造函数只带一个数字参数时(否则是作为填充),该参数会被作为数组的预设长度,而非填充一个元素,因此数组内是空单元 如果一个数组中存在一个空单元,即length的值大于实际单元数,这样的数组称 ...
- impdp导入.dmp到oracle
1.创建表空间 create tablespace CCGRP_PRO --表空间名 datafile 'D:\oracleData\test.dbf' --物理文件 表空间数据文件存放路径size ...
- web嵌入到原生的app里需要注意的事项
1.https://www.cnblogs.com/shimily/articles/7943370.html 2.https://www.cnblogs.com/stoneniqiu/p/60771 ...
- javascript语法规范和良好的变成习惯
1.1空白和多行书写 1.空白:空格键输入的空白.tab键输入的空白以及回车键输入的空白 2.多行书写,不能将引号内的字符串放到两行,不然容易报错. 1.2点语法 . 点语法表达式由对象开始,接着是一 ...
- redis常用命令--基础
redis默认有个数据库,下标从开始,不支持自定义数据库名字. 使用select index 切换数据库 : select 7 (切换到第八个数据库) dbsize:求当前数据库中键值对的数量. ...
- 19 01 13 JQery 加载 选择器 样式操作
在Javascript 中应该用下方法经行编辑 <script type="text/javascript" src="js/jquery-1.12.4.min ...