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), ...
随机推荐
- 十三、react-router 4.x的基本配置
路由的定义及作用 根组件根据客户端不同的请求网址显示时,要卸载上一个组件,再挂载下一个组件,如果手动操作话将是一个巨大麻烦.具体过程如下图: [根组件] ↑ [首页组件] [新闻组件] [商品组件] ...
- IO_课堂测试
IO_课堂测试 一,用户需求 英语的26 个字母的频率在一本小说中是如何分布的?某类型文章中常出现的单词是什么?某作家最常用的词汇是什么?<飘> 中最常用的短语是什么,等等. (1)要求1 ...
- 不要对md5file.read()计算md5值
最近遇到的一个问题,我使用以下代码对备份文件计算MD5值: # md5file=open("%s" % outputpath, 'rb') # md5=hashlib.md5(md ...
- TypeScript 文件引入 Html （ts import html webpack）
我们的目标是把html引入ts文件,webpack打包时就能把html打进js文件,减少文件加载啦 1 安装 text-loader npm install text-loader --save-de ...
- Vue点击按钮下载对应图片
最近有用到点击某个按钮 自动下载对应图片,可是对于浏览器不同的问题,会有‘个别’浏览器出现不能下载的或者下载的效果不同等的问题, 可以直接用创建canvas方法: 定义图片地址Img: "w ...
- 漏洞复现 - ActiveMQ反序列化漏洞(CVE-2015-5254)
基础知识 MQ(Message Queue):消息队列/消息中间件.消息服务将消息放在队列/主题中,在合适时候发给接收者.发送和接收是异步的(发送者和接收者的生命周期没有必然关系). 队列:消息存在队 ...
- 自学Java第五章——《面向对象基础》
5.1 类与对象 1.类:一类具有相同特性的事物的抽象描述. 对象:类的一个个体,实例,具体的存在. 类是对象的设计模板. 2.如何声明类? [修饰符] class 类名{ 成员列表:属性.方法 ...
- 数据库之存储过程Procedure
数据库之存储过程 一.概述 SQLserver中视图通过简单的select查询来解决复杂的查询,但是视图不能提供业务逻辑功能,而存储过程可以办到. 二.什么是存储过程 存储过程procedure是一组 ...
- mysql 时区问题导致的时间相差14小时
1.mysql 字段名称 类型 begin_time TIME begin_time=08:18:39 2.java数据库连接串 jdbc:mysql://x.x.x.x:3306/y?useUnic ...
- 简单makefile示例
Makefile cmd: - g++ 相信在linux下编程的没有不知道makefile的,刚开始学习linux平台下的东西,了解了下makefile的制作,觉得有点东西可以记录下. 下面是一个极其 ...