HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传，利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。Storage模块管理应用本地数据存储区，用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同，前者可在应用内跨域操作，数据存储期是持久化的，并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据，数据格式符合Multipart/form-data规范，即rfc1867（Form-based File Upload in HTML）协议。
拍照或相册选取一张demo下载地址：http://pan.baidu.com/s/1cqnSNs
拍照或相册选取多张demo下载地址：http://pan.baidu.com/s/1o7UQHxo
<!doctype html>
<html class="feedback">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="misapplication-tap-highlight" content="no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="" />
<title>HTML5 Plus 拍照或者相册选择图片上传</title>
<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" type="text/css" href="../../css/app.css" />
<link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../../css/feedback-page.css" />
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/utitls.js"></script>
<style type="text/css">
.del {
position: absolute;
top:1px;
right: 1px;
display: block;
line-height: ;
cursor: pointer;
color:#fff;
} .del:hover {
color:#ff3333;
}
</style>
<style>
.table-view {
position: relative;
margin-top: ;
margin-bottom: ;
padding-left: ;
list-style: none;
background-color: #f5f5f5;
} .table-view-cell {
position: relative;
overflow: hidden;
padding: 0px 15px;
-webkit-touch-callout: none;
margin-bottom: 1px;
} .table-view-cell:after {
position: absolute;
right: ;
bottom: ;
left: 0px;
height: 1px;
content: '';
-webkit-transform: scaleY(.);
transform: scaleY(.);
background-color: #c8c7cc;
} .table-view-cell>a:not(.btn) {
position: relative;
display: block;
overflow: hidden;
margin: -0px -15px;
padding: inherit;
white-space: nowrap;
text-overflow: ellipsis;
color: inherit;
background-color: #75b9f4;
height: 40px;
line-height: 40px;
} .navigate-right:after
{
font-family: Muiicons;
font-size: inherit;
line-height: ;
position: absolute;
top: %;
display: inline-block;
-webkit-transform: translateY(-%);
transform: translateY(-%);
text-decoration: none;
color: #;
-webkit-font-smoothing: antialiased;
} .table-view-cell.collapse .collapse-content {
position: relative;
display: none;
overflow: hidden;
margin: 0px -15px 0px;
padding: 0px 0px !important;
-webkit-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
background-color: transparent;
}
.image-item{
position: relative;
}
.image-item .info{
position: absolute;
top:0px;
left:4px;
color: #ff9900;
font-size: 12px; }
</style>
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">拍照或者相册选择图片上传</h1>
</header>
<div class="content">
<div style="margin-top: 10px;"></div>
<input type="hidden" id="ckjl.id" name="ckjl.id" value="">
<div class="collapse-content" >
<form>
<label class="row-label"></label>
<div id='F_CKJLBS' class="row image-list">
<div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div>
</div>
</form>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script>
var procinstid = ;
//初始化页面执行操作
function plusReady() {
//Android返回键监听事件
plus.key.addEventListener('backbutton',function(){
myclose();
},false);
}
if (window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
//加载页面初始化需要加载的图片信息
function showImgDetail (imgId,imgkey,id,src) {
var html = "";
html +='<div id="Img'+imgId+imgkey+'" class="image-item ">';
html +=' <img id="picBig" data-preview-src="" data-preview-group="1" '+src+'/>';
html +=' <span class="del" onclick="delImg(\''+imgId+'\',\''+imgkey+'\','+id+');">';
html +=' <div class="fa fa-times-circle"></div>';
html +=' </span>';
html +='</div>';
$("#"+imgkey+"S").append(html);
}
//删除图片
function delImg(imgId,imgkey,id){
var bts = ["是", "否"];
plus.nativeUI.confirm("是否删除图片？", function(e) {
var i = e.index;
if (i == ) {
var itemname=id+"img-"+imgkey;
var itemvalue=plus.storage.getItem(itemname);
if(itemvalue!=null){
var index=itemvalue.indexOf(imgId+",");
if(index==-){//没有找到
delImgfromint(imgId,imgkey,id,index);
}else{
delImgFromLocal(itemname,itemvalue,imgId,imgkey,index); //修改，加了一个index参数
} }else{
delImgfromint(imgId,imgkey,id);
}
}
},"查勘", bts);
/*var isdel = confirm("是否删除图片？");
if(isdel == false){
return;
}*/ }
function delImgFromLocal(itemname,itemvalue,imgId,imgkey,index){
var wa = plus.nativeUI.showWaiting();
var left=itemvalue.substr(,index-);
var right=itemvalue.substring(index,itemvalue.length);
var end=right.indexOf("}");
right=right.substring(end+,right.length);
var newitem=left+right;
plus.storage.setItem(itemname,newitem);
myAlert("删除成功");
$("#Img"+imgId+imgkey).remove();
wa.close();
}
//选取图片的来源，拍照和相册
function showActionSheet(conf){
var divid = conf.id;
var actionbuttons=[{title:"拍照"},{title:"相册选取"}];
var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};
plus.nativeUI.actionSheet(actionstyle, function(e){
if(e.index==){
getImage(divid);
}else if(e.index==){
galleryImg(divid);
}
} );
}
//相册选取图片
function galleryImg(divid) {
plus.gallery.pick( function(p){
plus.io.resolveLocalFileSystemURL(p, function(entry) {
compressImage(entry.toLocalURL(),entry.name,divid);
}, function(e) {
plus.nativeUI.toast("读取拍照文件错误：" + e.message);
});
}, function ( e ) {
}, {
filename: "_doc/camera/",
filter:"image"
} );
}
// 拍照
function getImage(divid) {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
compressImage(entry.toLocalURL(),entry.name,divid);
}, function(e) {
plus.nativeUI.toast("读取拍照文件错误：" + e.message);
});
}, function(e) {
}, {
filename: "_doc/camera/",
index:
});
}
//压缩图片
function compressImage(url,filename,divid){
var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg
plus.zip.compressImage({
src:url,//src: (String 类型 )压缩转换原始图片的路径
dst:name,//压缩转换目标图片的路径
quality:,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100
overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件
},
function(event) {
//uploadf(event.target,divid);
var path = name;//压缩转换目标图片的路径
//event.target获取压缩转换后的图片url路
//filename图片名称
saveimage(event.target,divid,filename,path);
},function(error) {
plus.nativeUI.toast("压缩图片失败，请稍候再试");
});
}
//保存信息到本地
/**
*
* @param {Object} url 图片的地址
* @param {Object} divid 字段的名称
* @param {Object} name 图片的名称
*/
function saveimage(url,divid,name,path){
var state=;
var wt = plus.nativeUI.showWaiting();
// plus.storage.clear();
name=name.substring(,name.indexOf("."));
var id = document.getElementById("ckjl.id").value;
var itemname=id+"img-"+divid;
var itemvalue=plus.storage.getItem(itemname);
if(itemvalue==null){
itemvalue="{"+name+","+path+","+url+"}";
}else{
itemvalue=itemvalue+"{"+name+","+path+","+url+"}";
}
plus.storage.setItem(itemname, itemvalue); var src = 'src="'+url+'"';
//alert("itemvalue="+itemvalue);
showImgDetail(name,divid,id,src);
wt.close(); }
//上传图片，实例中没有添加上传按钮
function uploadimge(agree,back) {
//plus.storage.clear();
var wa = plus.nativeUI.showWaiting();
var DkeyNames=[];
var id = document.getElementById("ckjl.id").value;
var length=id.toString().length;
var idnmae=id.toString();
var numKeys=plus.storage.getLength();
var task = plus.uploader.createUpload('http://demo.dcloud.net.cn/helloh5/uploader/upload.php', {
method: "POST"
},
function(t, status) {
if (status == ) {
console.log("上传成功");
} else {
wa.close();
console.log("上传失败");
}
}
);
task.addData("id",id);
for(var i=; i<imgArray.length;i++){
var itemkey=id+"img-"+imgArray[i];
if(plus.storage.getItem(itemkey)!=null){
var itemvalue=plus.storage.getItem(itemkey).split("{");
for(var img=;img<itemvalue.length;img++){
var imgname=itemvalue[img].substr(,itemvalue[img].indexOf(","));
var imgurl=itemvalue[img].substring(itemvalue[img].indexOf(",")+,itemvalue[img].lastIndexOf(","));
task.addFile(imgurl,{key:imgurl});
}
}
}
task.start(); }
</script>
</body>
</html>
原文：http://blog.csdn.net/qq_27626333/article/details/51896616
HTML5 Plus 拍照或者相册选择图片上传的更多相关文章
- Ionic3学习笔记（十二）拍照上传图片以及从相册选择图片上传
本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...
- IOS网络第五天 AFN-02-文件上传，底部弹出窗体，拍照和相册获取图片上传
************** #import "HMViewController.h" #import "AFNetworking.h" @interface ...
- HTML5 开发APP(打开相册以及图片上传)
我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图 基本功能是 ...
- mui + H5 调取摄像头和相册 实现图片上传
最近要用MUI做项目,在研究图片上传时 ,遇到了大坑 ,网上搜集各种资料,最终写了一个demo,直接看代码.参考(http://www.cnblogs.com/richerdyoung/p/66123 ...
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...
- android拍照选择图片上传服务器自定义控件
做android项目的时候总免不了遇到图片上传功能,虽然就是调用android系统的拍照和相册选择功能,但是总面部了把一大推代码写在activity里,看上去一大推代码头都昏了.不如把这些功能都集成一 ...
- H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- Ionic 选择图片上传
1.添加插件 1.1 安装ngcordova 1.2 安装选择图片插件 1.3 安装上传插件 1.4查看安装插件集合 2.html 代码 <div class="item item-i ...
随机推荐
- [django]JsonResponse序列化数据
def home(request): data = { 'name': 'maotai', 'age': 22 } import json return HttpResponse(json.dumps ...
- [py]python的私有变量
参考 python中并没有真正意义上的私有成员,它提供了在成员前面添加双下划线的方法来模拟类似功能.具体来说: _xxx 表示模块级别的私有变量或函数 __xxx 表示类的私有变量或函数 这被称为na ...
- Civil and Evil Engineer（普林姆）
http://acm.sdut.edu.cn:8080/vjudge/contest/view.action?cid=198#problem/E 水题一道,题意就是让求一遍最小生成树与最大生成树,但我 ...
- cocos代码研究（6）有限时间动作类（FiniteTimeAction）学习笔记
理论部分 有限时间动作类继承自Action类,被 ActionInstant(即时动作) , 以及 ActionInterval(持续动作) 继承. 即时动作是会立即被执行的动作,被 CallFunc ...
- 登录使用inode的校园网用到的url
无需使用inode客户端,直接访问下面的url,然后输入账号密码即可. 第一次访问这个url的时候可能会提示下载inode客户端,再访问一次即可. url1:http://172.20.1.1/por ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON SigmaImage2
zw版[转发·台湾nvp系列Delphi例程]HALCON SigmaImage2 procedure TForm1.Button1Click(Sender: TObject);var op: HOp ...
- Linux服务器配置---ssh配置
Ssh配置 通过配置文件,我们可以有效的管理ssh 1.空闲时间关闭连接 1)修改配置文件“/etc/ssh/sshd_config”,设置clientAliveInterval和client ...
- Js基础知识5-函数返回值、函数参数、函数属性、函数方法
函数返回值 所有函数都有返回值,没有return语句时,默认返回内容为undefined,和其他面向对象的编程语言一样,return语句不会阻止finally子句的执行. function testF ...
- 在Linux 中进入单用户模式的技巧
在这篇简短的文章中,我们将向你介绍在 SUSE 12 Linux 中进入单用户模式的步骤.在排除系统主要问题时,单用户模式始终是首选.单用户模式禁用网络并且没有其他用户登录,你可以排除许多多用户系统的 ...
- Centos 更改系统时间
.date //查看本地 .hwclock --show //查看硬件的时间 .如果硬件的时间是对不上,那就对硬件的时间进行修改 .hwclock --set --date '2222-22-22 2 ...