图片上传，是现在许多手机应用避不开的功能。常见的图片上传，是通过手机相册，或者摄像头拍照来完成对图片的选择。
就像下面的图这样：
但是，有的应用只是单纯地想调用摄像头拍照，然后去选择那些拍摄获取的图片，并且有事没事还可以看看之前拍了哪些照片，然后直接拿去就用了，不用每次都调用摄像头。
例如这样：
这样的需求，就相当于我们要创建一个属于当前应用自己的相册，不和系统相册一起玩了。
现在我们来看下具体的实现：
一、camera.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.img-content {
text-align: center;
}
#img_view {
width: 300px;
height: 300px;
}
.camera-div {
margin-top: 20px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">相机</h1>
</header>
<div class="mui-content">
<div class="img-content">
<!--做为预览图片的元素-->
<img src="img/shuijiao.jpg" id="img_view" />
<div><span>点击上图选择图片</span></div>
</div>
<div class="camera-div">
<button type="button" class="mui-btn mui-btn-yellow mui-btn-block" id="get_camera">拍照</button>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
var cameraUrl = "_doc/camera/"; //拍照后图片保存的地址
// 调用摄像头事件
document.getElementById("get_camera").addEventListener("tap", function() {
/**
* 获取摄像头对象
* http://www.html5plus.org/doc/zh_cn/camera.html#plus.camera.getCamera
*/
var camera = plus.camera.getCamera();
/**
* 进行拍照操作
* http://www.html5plus.org/doc/zh_cn/camera.html#plus.camera.Camera.captureImage
*/
camera.captureImage(function(captureFile) {
// 拍照完成后，进入选择照片的页面；
showImages(cameraUrl);
}, function(error) {
console.log("拍照错误，错误编码：" + error.code);
console.log("拍照错误，错误描述信息：" + error.message);
}, {
filename: cameraUrl
});
});
var imgEl = document.getElementById("img_view"); //img元素节点
// 点击图片，查看对应目录下的图片；这里只是为了演示读取文件，实际开发中可以参考；
imgEl.addEventListener("tap", function() {
showImages(cameraUrl);
});
/**
* 自定义事件，预览选择好的图片；
* http://dev.dcloud.net.cn/mui/event/#customevent
*/
window.addEventListener("change_image", function(event) {
var imgUrl = event.detail.imgUrl;
imgEl.src = imgUrl;
});
});
/**
* 展示指定目录下的图片
* @param {String} targetUrl 目录地址
*/
function showImages(targetUrl) {
// 第一步，获取目标目录对象；
/**
* 通过URL参数获取目录对象或文件对象
* http://www.html5plus.org/doc/zh_cn/io.html#plus.io.resolveLocalFileSystemURL
*/
plus.io.resolveLocalFileSystemURL(targetUrl, function(entry) {
// 第二步，创建读取目录的对象；
/**
* 创建目录读取对象
* http://www.html5plus.org/doc/zh_cn/io.html#plus.io.DirectoryEntry.createReader
*/
var reader = entry.createReader();
// 第三步，读取目录下的对象；
/**
* 获取当前目录中的所有文件和子目录
* http://www.html5plus.org/doc/zh_cn/io.html#plus.io.DirectoryReader.readEntries
*/
reader.readEntries(function(subFiles) {
var imgArr = [];
// 第四步，获取目录下对象的路径；
/**
* 将读取到的文件的路径，添加至数组中；
* http://www.html5plus.org/doc/zh_cn/io.html#plus.io.DirectoryEntry.fullPath
*/
for(var i = 0, len = subFiles.length; i < len; i++) {
imgArr.push(subFiles[i].fullPath);
}
// 第五步，去查看摄像头拍摄的图片；
/**
* 打开预览图片的页面，并将图片的地址传过去；
* http://dev.dcloud.net.cn/mui/window/#openwindow
*/
mui.openWindow({
url: "camera_gallery.html",
id: "camera_gallery",
extras: {
imgArr: imgArr
}
});
}, function(error) {
console.log("文件操作失败信息：" + error);
});
}, function(error) {
console.log("读取本地目录失败，失败信息：" + error);
});
}
</script>
</body>
</html>大家注意到第42行的变量cameraUrl，这个变量的值，就是我们应用自己相册的路径啦。
调用摄像头逻辑：
1、点击“拍照”按钮，创建摄像头对象；
2、摄像头拍照，在拍照方法的回调中，我们通过相册的路径访问到相册下的文件；
3、创建目录读取对象，用于读取目录下的文件及子目录；
4、获取当前目录下的文件，并将文件系统的绝对路径取出，放置在一个数组中；
5、打开新窗口，并将文件路径的数组传过去。
直接打开本应用相册逻辑：
与上面不同的地方，就是省去了打开摄像头的操作，直接根据目录路径访问即可。
二、camera_gallery.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
height: 150px;
}
.mui-grid-view.mui-grid-9 .mui-media .mui-icon {
position: absolute;
right: 15px;
top: 15px;
z-index: 1;
color: yellow;
}
#sure_img {
margin-top: 10px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-pull-right" id="sure_img">确定</a>
<h1 class="mui-title">相机相册</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
<img class="mui-media-object" src="../../img/shuijiao.jpg">
<span class="mui-icon mui-icon-star-filled"></span>
</li>-->
</ul>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.lazyload.js"></script>
<script src="js/mui.lazyload.img.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
var currentNode = null; //当前选中的元素节点对象
var targetImage = ""; //选中的图片路径
/**
* 获取当前窗口对象
* http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview
*/
var self = plus.webview.currentWebview();
var imgArr = self.imgArr;
/**
* 动态拼接，图文表格；
* http://dcloud.io/hellomui/examples/slider-table-default.html
* 使用懒加载；
* http://dcloud.io/hellomui/examples/lazyload-image.html
*/
/**
* 懒加载比较关键的三个点：
* 1、引入mui.lazyload.js以及mui.lazyload.img.js文件；
* 2、img标签中使用data-lazyload来存储实际要展示的图片路径；
* 3、用mui选择器获取文档节点，进行懒加载初始化操作；
*/
var html = "";
for(var i = 0, len = imgArr.length; i < len; i++) {
html += '<li class="mui-table-view-cell mui-media mui-col-xs-6">' +
'<img class="mui-media-object" data-lazyload="' + imgArr[i] + '" /></li>';
}
// 拼接目标节点的内容
document.querySelector(".mui-table-view").innerHTML = html;
// 懒加载初始化
mui(document).imageLazyload({
placeholder: "img/text.png"
});
/**
* 添加选择图片事件
*/
mui(".mui-table-view").on("tap", ".mui-table-view-cell", function() {
// 第一步，替换选中图片路径
targetImage = this.querySelector(".mui-media-object").src;
// 第二步，判断是否已经有图片被选中；若有，则移除之前的星星，因为此例子仅做单选；
if(currentNode) {
currentNode.removeChild(currentNode.querySelector("span"));
}
// 第三步，创建一个span元素节点，在图片右上角添加一个黄色的填充星星；
var spanNode = document.createElement("span");
spanNode.classList.add("mui-icon");
spanNode.classList.add("mui-icon-star-filled");
this.appendChild(spanNode);
// 第四步，替换当前被选中节点对象；
currentNode = this;
});
// 确定选择的图片
document.getElementById("sure_img").addEventListener("tap", function() {
if(targetImage) {
/**
* 获取当前窗口的创建者
* http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.opener
*/
var opener = self.opener();
/**
* 触发目标窗口对象的事件，替换图片；
* http://dev.dcloud.net.cn/mui/event/#customevent
*/
mui.fire(opener, "change_image", {
imgUrl: targetImage
});
// 返回上一页
mui.back();
} else {
mui.toast("请选择图片");
}
});
});
</script>
</body>
</html> 这就是我们应用自己的相册咯，这里仅仅做单选的示例，多选大家自己扩展咯，道理是一样的。
1、获取到上一级传过来的所有文件的地址，动态拼接出所有的图片；
2、用mui的事件绑定对图片进行批量事件绑定：在我们点击图片的时候，右上角添加一颗小星星用来标记当前图片；
3、选好图片了，点击右上角的“确认”，并利用自定义事件将选中的图片地址传到上一级页面，替换之前预览的图片；
4、之后你想对这个图片干什么，就看自己的业务需求了。
最后，附上源码，真机运行即可。
