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), ...
随机推荐
- PHP笔记03
PHP表单 获取表单数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- MyBatis从入门到精通(第3章)：MyBatis注解方式的基本使用
MyBatis 注解方式就是将 SQL 语句直接写在DAO层的接口上. 在黑马录制的2018年双元视频课:\08 SSM整合案例[企业权限管理系统]\07.订单操作 有使用MyBatis注解进行多表 ...
- 第十三篇Django Logging配置样例
第十三篇Django Logging配置样例 阅读目录(Content) Django 日志配置模板 官方链接 Django Logging Django 日志配置模板 LOGGING = { 've ...
- 第一部分 JavaScript语言核心（四）
第九章 类和模块 P235 组合VS子类:组合优于继承 P236 类的层次结构和抽象类 第十章 正则达式的模式匹配 定义 JS中正则表达式用RegExp对象表示.直接量定义为包含在一堆斜杠(/)之间的 ...
- UVA - 1001 Say Cheese(奶酪里的老鼠)（flod）
题意:无限大的奶酪里有n(0<=n<=100)个球形的洞.你的任务是帮助小老鼠A用最短的时间到达小老鼠O所在位置.奶酪里的移动速度为10秒一个单位,但是在洞里可以瞬间移动.洞和洞可以相交. ...
- 5 ~ express ~ 连接数据库
1, 在schema 目录创建 users.js 文件,通过 mongoose 模块来操作数据库 2, 在定义 users 表结构之前,需要让应用支持或连接数据库 . 所以要在应用的入口文件 app ...
- html通配符
♠ ♠ ♠ 黑桃 ♣ ♣ ♣ 梅花 ♥ ♥ ♥ 红桃,心 ♦ ♦ ♦ 方块牌 ◊ ◊ ◊ 菱形 † † † 匕首 ‡ ‡ ‡ 双剑号 ¡ ¡ ¡ 反向感叹号 ¿ ¿ ¿ 反向问号 ← ← ← 左箭头 ...
- 用Python分析淘宝2000款避孕套，得出这些有趣的结论
数据分析之前我们需要清楚的知道自己想要分析什么东西,也就是先搞清楚我们的目标.在公司可能是公司财报.用户增量变化.产品受欢迎程度.一些报表等等. 那我们今天的目标有哪些呢?我们来看看: ! 分析避孕套 ...
- swift中使用UIColllectionView实现横向轮播的一般方法
// // HomeLiveRankCell.swift // YYSwiftProject // // Created by Domo on 2018/7/28. // Copyright ...
- [XSS防御]HttpOnly之四两拨千斤
今天看了<白帽子讲web安全>一书,顺便记录一下,HttpOnly的设置 httponly的设置值为 TRUE 时,使得Javascript无法获取到该值,有效地防御了XSS打管理员的 c ...