MUI 拍照和从系统相册选择图片上传

要完成用MUI 拍照和从系统相册选择图片上传的功能,可以理解成有三个功能

1 调用手机相机的功能(可以查看官方API  http://www.html5plus.org/doc/zh_cn/camera.html)

2 调用系统相册的功能(可以查看官方API  http://www.html5plus.org/doc/zh_cn/gallery.html)

3 照片资源上传到服务(可以查看官方API  http://www.html5plus.org/doc/zh_cn/uploader.html)

 

下面是我的使用例子,

一, 调用 打开系统选择框按钮

 

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(); //拿到图片路径// 其他操作,比如预览展示}, function(e) {console.log("读取拍照文件错误:" + e.message);});}, function(s) {console.log("error" + s);}, {filename: "_doc/camera/"})
}


三, 打开手机相册

 

// 从相册中选择图片 
function galleryImg(){// 从相册中选择图片plus.gallery.pick( function(e){for(var i in e.files){var fileSrc = e.files[i];// 其他操作,比如预览展示}}, function ( e ) {console.log( "取消选择图片" );},{filter: "image",multiple: true,maximum: 5,system: false,onmaxed: function() {plus.nativeUI.alert('最多只能选择5张图片');}});
}

四, 上传到服务器

 

 

// 上传的方法
function upload(){MicroTaskGUID = common.guid();var rul = "服务器地址"var imgsArr = mui(".task-img"); // 要上传的 img 标签mui.each(imgsArr, function(index, item){
// 		console.log(index)
// 		console.log(item.src)createUp(item)})function createUp (files) {var task = plus.uploader.createUpload(url,{method:"POST"},function(t,status){ //上传完成if(status==200){console.log("上传成功:"+t.responseText);}else{console.log("上传失败:"+status);}});//添加其他参数
//	    task.addData("name","test");// 页面中要上传的 图片路径task.addFile(files.src,{key:files.src});task.start();}
}

 

 

 

 

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553640.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js使用深度优先遍历实现getElmentById(id)

function getElementById(node, id) {if (!node) return null;if (node.id id) return node;for (var i 0; i < node.childNodes.length; i) {var found getElementById(node.childNodes[i], id);if (found) return found;}return null;} 测试情况。 这里是使用递归的方…

win7系统电脑d盘不见了的解决方法

一般我们的电脑中都会有一个d盘&#xff0c;为了不让c盘内存太慢影响电脑运行&#xff0c;我们都会把一些文件放置在d盘。最近就有用户很着急的问小编win7电脑d盘不见了怎么办&#xff0c;不要慌&#xff0c;今天小编就来变一个魔术教教大家解决方法。下面就让我们一起来观看wi…

windows7系统如何设置远程连接

通过远程连接&#xff0c;我们可以轻松的实现远距离操作电脑的目的。一般windows系统都自带有远程桌面连接功能&#xff0c;不过很多网友不清楚如何操作。那么windows7系统如何设置远程连接呢?下面小编就教下大家win7远程桌面连接设置方法。 windows7系统如何设置远程连接&am…

js 把线性的数据结构改成树形结构

把数组的数据结构改成树形结构。 var aaa [{name:"111", id: 1, pId: 0, children: []},{name:"222", id: 6, pId: 0, children: []},{name:"b", id: 2, pId: 1, children: []},{name:"c", id: 3, pId: 1, children: []},{name:"…

腾讯视频怎么删除收藏的内容

使用腾讯视频时&#xff0c;有时候需要删除收藏的视频内容。腾讯视频怎么删除收藏的内容?下面就演示操作步骤。 腾讯视频怎么删除收藏的内容 1、打开腾讯视频应用后&#xff0c;点击右下方我的选项。 腾讯视频怎么删除收藏的内容 2、选择我的收藏的图标进入。 腾讯视频怎…

Git 切换远程分支

Git切换远程分支有两种方法 1 直接修改 git remote set-url origin 地址 2 先删除后添加 git remote rm origin git remote add origin 地址

全局安装cnpm

npm install -g cnpm --registryhttps://registry.npm.taobao.org

搜狗浏览器打不开网页的解决方法

搜狗浏览器是很多用户都在使用&#xff0c;它最大的特点就是它的高速模式。不过&#xff0c;但是我们使用该浏览器时可能也会碰到这样那样的问题&#xff0c;最近&#xff0c;也有一些用户遇到搜狗浏览器网页打不开&#xff0c;或者网页显示不正常的情况。我们要怎么才能解决这…

Firefox鼠标手势插件在哪安装 火狐浏览器鼠标手势怎么用

一些资深网民一定用过浏览器手势&#xff0c;使用鼠标右键划下轨迹&#xff0c;就可以快速新建标签、关闭当前页面&#xff0c;刷新页面等操作&#xff0c;而在 Firefox 火狐浏览器中也可以使用这样的插件&#xff0c;但Firefox鼠标手势插件在哪安装呢? Firefox鼠标手势插件在…

ECharts 联动效果

在使用ECharts 时候要用到联动的&#xff0c;比如下面的示例图&#xff0c;当鼠标经过A的图的时候&#xff0c;这个时候有提示&#xff0c;然后让B的提示也显示出来。这样一个效果。 官方文档给的配置项&#xff0c; http://echarts.baidu.com/api.html#echarts.connect var my…

谷歌浏览器插件安装方法 谷歌浏览器导入插件的步骤

在谷歌浏览器中需要一些插件&#xff0c;是可以在应用商店中找到的&#xff0c;如果需要进行手工安装谷歌浏览器插件则更为简单一些&#xff0c;那就是将制作好的谷歌插件拖入到谷歌浏览器中。具体见下文谷歌浏览器插件安装方法。 谷歌浏览器插件安装方法&#xff1a; 1、首先…

NodeJs express自定义中间件

用过express 的开发者,想必一定用过中间件。本文就说一下自定义的中间件。 一&#xff0c;先看下中间件的使用。 1访问文件的中间件 express-static const express require("express"); const expressStatic require("express-static");var app expre…

win7电脑内存信息的查看方法

电脑各项信息的查看于部分小伙伴而言可能都还不是很熟悉&#xff0c;那么win7怎么查看电脑内存信息?就此问题&#xff0c;今天小编就教大家win7电脑内存信息的查看方法&#xff0c;一起来看看吧。 win7电脑内存信息的查看方法 首先我们在电脑桌面按快捷键【WinPause Break】…

NodeJS 模板 -- jade

jade 的安装什么的就不说了&#xff0c;就说一下jade的一些语法。官网在这里 jade 是必须用自己的语法&#xff0c;她不可以和原生的html混合使用&#xff0c;当然ejs是可以的。 例子一 const jade require(jade);var str jade.render(html);console.log(str)运行结果为 &l…

windows7系统屏幕一直闪屏的解决教程

win7系统是一款使用体验非常棒的优秀体验!强大的稳定性确保了系统的流畅运行&#xff0c;但是最近有许多的win7小伙伴们反应自己遇到了屏幕一直闪屏的问题&#xff0c;windows7系统屏幕一直闪屏怎么解决?今天小编就为大家带来了windows7系统屏幕一直闪屏的解决教程&#xff0c…

Git Permission to fazhiyun86/Test.git denied to MarRoar

先说明问题。在我的电脑上有两个SSH key&#xff0c;也就是有两个GitHub账户。我们在GitHub账户里面配置好 SSH key 的时候&#xff0c;就可以向自己的GitHub账户的仓库里面push 代码。 我们先在第一个账户push 代码的时候会让输入 用户名和密码。当向另一个账户push 东西的时…

PP视频如何将默认缓存清晰度设置成超清

PP视频如何将默认缓存清晰度设置成超清呢?很多人都不会&#xff0c;下面小编来详细的讲解一下。 PP视频如何将默认缓存清晰度设置成超清 1、先打开手机&#xff0c;点击桌面上的PP视频。 PP视频如何将默认缓存清晰度设置成超清 2、然后点击右下角我的。 PP视频如何将默认…

ECharts 饼图 legend 样式修改

在移动端展示一个数据很多的饼图的时候&#xff0c;首先看一下效果。ECharts legend 配置项 1 legend 让它在右面竖着显示。 legend: {type: scroll,orient: vertical,show: true,right: 0,top: 20,bottom: 20,textStyle: {fontSize: 7},formatter: function (name) {return (n…

怎么设置火狐浏览器自动刷新 火狐浏览器自动刷新图文教程

火狐浏览器怎么设置自动刷新?火狐浏览器为用户提供最新的搜索、网址导航、新闻资讯、网络购物等服务。还有对用户的隐私保护&#xff0c;个性化设置、更快的上网速度等功能&#xff0c;火狐浏览器要怎么设置自动刷新呢&#xff0c;下面就给大家分享具体步骤。 1、首先打开火狐…

C3 粒子闪烁效果

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>闪烁</title><style>body {background-color: #000;}.bim-flash-circle {width: 10px;height: 10px;position: absolute;left: 50%;top: 5…