mui调用本地相册调用相机上传照片
调用mui的常用库和jquery
html部分:
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">上传照片</h1>
<a class="mui-icon-right-nav mui-pull-right">
<span id="headImage" class="mui-icon mui-icon-camera"></span>
</a>
<a class="mui-icon-right-nav mui-pull-right">
<span id="uploadImage" class="mui-icon mui-icon-upload"></span>
</a>
</header>
<div class="mui-content" style="background-color:#fff">
<!-- 图片容器 -->
<ul id="imgs" class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<img class="mui-media-object" src="data:images/60x60.gif">
<span class="mui-icon mui-icon-trash deleteBtn" onclick="deleteImg(event)"></span>
</li> </ul>
</div>
js部分:
<script type="text/javascript">
mui.init();
var fileArr = [];
mui.init({
swipeBack: true //启用右滑关闭功能
});
document.getElementById('headImage').addEventListener('tap', function() {
if (mui.os.plus) {
var buttonTit = [{
title: "拍照"
}, {
title: "从手机相册选择"
}]; plus.nativeUI.actionSheet({
title: "上传图片",
cancel: "取消",
buttons: buttonTit
}, function(b) { /*actionSheet 按钮点击事件*/
switch (b.index) {
case 0:
break;
case 1:
getImage(); /*拍照*/
break;
case 2:
galleryImg(); /*打开相册*/
break;
default:
break;
}
})
}
}, false); // 拍照获取图片
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径
setFile(imgSrc);
setHtml(imgSrc);
}, function(e) {
console.log("读取拍照文件错误:" + e.message);
});
}, function(s) {
console.log("error" + s.message);
}, {
filename: "_doc/camera/"
})
}
// 从相册中选择图片
function galleryImg() {
// 从相册中选择图片
plus.gallery.pick(function(e) {
for (var i in e.files) {
var fileSrc = e.files[i];
setFile(fileSrc);
setHtml(fileSrc);
}
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image",
multiple: true,
//maximum: 5,
system: false,
onmaxed: function() {
plus.nativeUI.alert('最多只能选择5张图片');
}
});
} //删除当前照片--删除当前元素的整个父级元素
function deleteImg(event) {
var obj = event.srcElement;
obj.parentElement.remove();
} function setHtml(path) {
var str = '';
str = '<li class="mui-table-view-cell mui-media mui-col-xs-4">' +
'<img class="mui-media-object" src="' + path + '">' +
'<span class="mui-icon mui-icon-trash deleteBtn" onclick="deleteImg(event)"></span>' +
'</li>';
jQuery("#imgs").append(str);
} function setFile(fileSrc) {
var image = new Image();
image.src = fileSrc;
fileArr.push(image);
} document.getElementById('uploadImage').addEventListener('tap', function() {
var files = fileArr;
var wt = plus.nativeUI.showWaiting();
var task = plus.uploader.createUpload('http://127.0.0.1:8848/weizhen_app/Upload', {
method: "POST"
},
function(t, status) { //上传完成
if (status == 200) {
alert("上传成功:" + t.responseText);
wt.close(); //关闭等待提示按钮
} else {
alert("上传失败:" + status);
wt.close(); //关闭等待提示按钮
}
}
);
//将文件集合添加到上传队列中
for (var i = 0; i < files.length; i++) {
var f = files[i];
task.addFile(f.src, {
key: i
});
}
//传其他的参数 如备注
//添加其他参数
//遍历5个input框
task.addData("comment", "test");
task.start();
});
</script>
mui调用本地相册调用相机上传照片的更多相关文章
- requests模拟上传照片
博客园相册管理中有上传照片的功能 现在通过requests库模拟上传图片功能 先手动上传图片,用Fiddler转包,查看到上传图片接口请求格式, ------WebKitFormBoundarySKZ ...
- Hbuilder mui 相册拍照图片上传
http://www.bcty365.com/content-146-3648-1.html 使用流程 弹出actionSheet /*点击头像触发*/ document.getElementById ...
- Xamarin.Android 调用本地相册
调用本地相册选中照片在ImageView上显示 代码: using System; using System.Collections.Generic; using System.Linq; using ...
- Swift—调用系统相册和相机
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...
- ios调用系统相册、相机 显示中文标题、本地化多语言支持
因为调用系统相册.相机需要显示中文,所以搞了半天才知道是在Project->info->Custom ios Target Properties 添加 Localizations 并加入C ...
- IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)[转]
IOS5开发-http get/post调用mvc4 webapi互操作(图片上传) 目前最流行的跨平台交互是采用http协议通过JSON对象进行互操作.这种方式最简单,也很高效.webservi ...
- iOS调用系统相册、相机 显示中文标题
解决手机语言已经设置显示中文 在调用系统相册.相机界面 时显示英文问题, 在 info.plist里面添加Localized resources can be mixed YES 表 ...
- mui + H5 调取摄像头和相册 实现图片上传
最近要用MUI做项目,在研究图片上传时 ,遇到了大坑 ,网上搜集各种资料,最终写了一个demo,直接看代码.参考(http://www.cnblogs.com/richerdyoung/p/66123 ...
- Android中通过访问本地相册或者相机设置用户头像
目前几乎所有的APP在用户注册时都会有设置头像的需求,大致分为三种情况: (1)通过获取本地相册的图片,经过裁剪后作为头像. (2)通过启动手机相机,现拍图片然后裁剪作为头像. (3)在APP中添加一 ...
随机推荐
- apache和LAMP架构
资源池: httpd依赖包:apr 和 apr-util 下载:点击这里 httpd 下载:点击这里 mysql 下载:点击这里 php 下载: 点击这里 本章资源: 点击这里 资源提取码:u2jv ...
- k8s 调度 GPU
最近公司有项目想在 k8s 集群中运行 GPU 任务,于是研究了一下.下面是部署的步骤. 1. 首先得有一个可以运行的 k8s 集群. 集群部署参考 kubeadm安装k8s 2. 准备 GPU 节点 ...
- sh 脚本名字和./脚本名字有什么区别
sh xxx用 sh 这个shell (sh一般指系统默认shell,比如 bash, ksh, Csh 等都有可能) 来解释和运行 xxx 这个脚本.xxx 文件不必具有可执行属性(chmod +x ...
- P2120 [ZJOI2007] 仓库建设(斜率优化DP)
题意:\(1\sim N\) 号工厂,第\(i\) 个工厂有\(P_i\)个成品,第\(i\)个工厂建立仓库需要\(C_i\)的费用,该工厂距离第一个工厂的距离为\(X_i\),编号小的工厂只能往编号 ...
- hdu5627 Clarke and MST (并查集)
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submission ...
- P3376 【模板】网络最大流——————Q - Marriage Match IV(最短路&最大流)
第一道题是模板题,下面主要是两种模板,但都用的是Dinic算法(第二个题也是) 第一题: 题意就不需要讲了,直接上代码: vector代码: 1 //invalid types 'int[int]' ...
- - 迷宫问题 POJ - 3984 bfs记录路径并输出最短路径
定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, ...
- 牛客编程巅峰赛S1第6场 - 黄金&钻石&王者 C.星球游戏 (单源最短路,Dijkstra)
题意:有\(n\)个点,\(m\)条双向边,两个方向的权值都是相等的,可以从\(A\)中的某个点出发走到\(B\)中的某个点,求所有路径中的最短距离,如果A和B中没有点联通,则输出\(-1\). 题解 ...
- 2020牛客暑期多校训练营(第二场) F.Fake Maxpooling (单调队列)
题意:有一个\(n\)x\(m\)的矩阵,\(A_{i,j}=lcm(i,j)\),对于每个\(k\)x\(k\)的子矩阵,其最大元素贡献给答案,求答案的最大值. 题解:矩阵构成我们直接\(i*j/g ...
- LSTM - 长短期记忆网络
循环神经网络(RNN) 人们不是每一秒都从头开始思考,就像你阅读本文时,不会从头去重新学习一个文字,人类的思维是有持续性的.传统的卷积神经网络没有记忆,不能解决这一个问题,循环神经网络(Recurre ...