mui 拍照、本地照片选择、上传、图片懒加载及大图浏览

/**
 * 
 * 
 * 《使用方法》：
 *      点击拍照及本地相册事件
 *      $("#headImage").on("tap", function(){
 *          getHeadImage("#imgs");
 *      })
 *          
 *      点击附件上传事件
 *      $("#uploadImage").on("tap", function(){
 *          uploadImage();
 *      })
 * 
 *  《注意事项》:
 *          必须引入：  下方两个文件为大图浏览的css和js————————————这里注意用下面的调用次序。
 *              <link rel="stylesheet" type="text/css" href="../../../css/previewImage.css" />
 *              <script src="../../../js/mui.previewimage.js"></script>
 *              <script type="text/javascript" src="../../js/mui.zoom.js"></script>
 * 
 * 
 */
//附件上传成功后返回的json
var fileJson = "";
//上传附件
var fileArr = [];
var urls = [];
var imagess = [];
// 拍照获取图片  
function getImage(imgsUI) {
    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, imgsUI);
            urls = [];
            imagess = [];
            loadImgs();
        }, function(e) {
            console.log("读取拍照文件错误：" + e.message);
        });
    }, function(s) {
        console.log("erroraaa" + s.message);
    }, {
        filename: "_doc/camera/"
    })
}

function getHeadImage(imgsUI) {

    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(imgsUI); /*拍照*/
                    break;
                case 2:
                    galleryImg(imgsUI); /*打开相册*/
                    break;
                default:
                    break;
            }
        })
    }

}

function setFile(fileSrc) {
    var image = new Image();  
    image.src = fileSrc;
    fileArr.push(image);
}

function setHtml(path, imgsUI) {

    var str = '';
    str = '<li id="lookImg" class="mui-table-view-cell mui-media mui-col-xs-6">' +
        '<div class="mui-content-padded">' +
        '<img data-lazyload="图片URL" class="mui-media-object" src="懒加载占位图片" data-preview-src="" data-preview-group="大图上浏览分组标识">' +  //《注意》：data-preview-group="1"这里为分组设置，如果界面中有多个div中放不同图片，那么这里要为每个组设置一个不同的值。
        '<span class="mui-icon mui-icon-trash deleteBtn"></span>' +  //这里是删除图片接钮
        '</div>' +
        '</li>';
    $(imgsUI).append(str);
      //《注意》：动态加载数据时，图片懒加载在加载完数据后调用。
      mui(document).imageLazyload({});  //图片懒加载调用方法
}

// 监听点击图片大图浏览
$(".mui-content").on('tap', '.mui-content-padded img', function() {

});
// 监听点击大图浏览图片返回
$("body").on("tap", "#__MUI_PREVIEWIMAGE", function() {

})


// 监听图片的删除点击
mui("body").on('tap', '.mui-content-padded span', function() {
    $(this).closest("li").hide(800, function() {
        $(this).closest("li").remove();
        urls = [];
        imagess = [];
        loadImgs()
    });
});

function loadImgs() {
    // 获取图片地址列表
    var images = document.querySelectorAll('.mui-content-padded img');

    imagess = images;
    for(var i = 0; i < images.length; i++) {
        urls.push(images[i].src);
    }
}

//图片上传
function uploadImage() {
    var files = new Array();
    $(".mui-content-padded").each(function(index) {
        var imgurl = $(this).find('img').attr('src');
        var image = new Image();  
        image.src = imgurl;
        files.push(image);
    });
    if(!files) {
        return;
    }

    mui.showLoading("上传中...");
      
    //获取token信息
    var appToken = localStorage.getItem("appToken");
    var tokenHeader = localStorage.getItem("tokenHeader");
  //上传路径
    var mainUrls = serverip + "api/innerapi/file_upload";
    var task = plus.uploader.createUpload(mainUrls,          {
        method: "POST",
        headers: {
            "Content-Type": "multipart/form-data"
        }
    }, function(t, status) { //上传完成
        mui.hideLoading();
        if(status == 200) {                        
            var filestr = eval('(' + t.responseText + ')');
            var fileData = filestr.data;
            fileJson = fileData;
            mui.toast('上传成功', {  
                duration: 1000,  
                type: 'div'  
            });
        } else {            
            onAlert("上传失败：" + status);            
            closeLoading(); //关闭等待提示按钮
                      
        }        
    }      );          //将文件集合添加到上传队列中
      

  //多张图片上传
    /*for(var i = 0; i < files.length; i++) {    
        var f = files[i];    
        task.addFile(f.src, {
            key: "file"
        });  
    } */
     
    task.addFile(files[0].src, {
        key: "file"
    });         
  //上传时带token信息
    task.setRequestHeader(tokenHeader, appToken);
  //添加其他参数
    task.addData("fileFrom", "信息发布"); 
    task.addData("attachType", "1");    
//开始上传
    task.start();
}
// 从相册中选择图片   
function galleryImg(imgsUI) {

    // 从相册中选择图片  
    plus.gallery.pick(function(e) {

        for(var i in e.files) {
            var fileSrc = e.files[i];
            setFile(fileSrc);
            setHtml(fileSrc, imgsUI);
        }
        urls = [];
        imagess = [];
        loadImgs();

    }, function(e) {
        if(e.code == 8) { //没有权限 
            var btnArray = ["确定"];
            mui.confirm('请在【设置】-【项目名称】中打开相机及相册权限！', '相册权限未开', btnArray, function(e) {
                if(e.index == 1) {

                } else {

                }
            })
        }
        console.log("取消选择图片");
    }, {
        filter: "image",
        multiple: true,
        maximum: 1,
        system: false,
        onmaxed: function() {
            onAlert('最多只能选择1张图片');
        }
    });
}

//大图浏览
mui.previewImage();

附demo
链接: https://pan.baidu.com/s/1dtIuS5jg7TkXl7OMBFiRPw 提取码: cics