MUI 图片+数据上传解决方案

最新推荐文章于 2022-04-13 17:57:25 发布

原创最新推荐文章于 2022-04-13 17:57:25 发布

· 1.9k 阅读

5 ·

版权

文章标签：

#MUI调用上传本地图片至服务器

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>首页</title>
	<script src="js/mui.min.js"></script>
	<link href="css/mui.min.css" rel="stylesheet" />
	<style>
		html,
		body {
			background-color: #efeff4;
		}
		
		.title {
			margin: 20px 15px 10px;
			color: #6d6d72;
			font-size: 15px;
			padding-bottom: 51px;
		}
	</style>
</head>

<body>
	<div class="mui-content">
		
    
    <img id="headImage" class="my_img_class" width="100px" height="200px" />
    <img id="task-img" class="my_img_class" width="100px" height="200px" />
    <button id="up">上传</button>
	</div>
	<script type="text/javascript" src="js/mui.js" ></script>
	<script type="text/javascript" src="js/mui.min.js" ></script>
	<script src="js/util.js"></script>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
	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() {
		    plus.camera.getCamera().captureImage(function(e){
                //console.log("e is" +  e);
                plus.io.resolveLocalFileSystemURL(e, function(entry) {
                    var path = entry.toLocalURL();
                     var task_img=document.getElementById('task-img');
				      task_img.src=path;            
                }, function(e) {
                    mui.toast("读取拍照文件错误：" + e.message);
                });
                });
		}

//从相册中选择图片 
function galleryImg(){
	// 从相册中选择图片
    plus.gallery.pick(function(path){
            // 其他操作,比如预览展示
            
            var task_img=document.getElementById('task-img');
				      task_img.src=path;
				      upload();
    });
}

// 上传的方法
function upload(){

var rul = "";

var imgsArr = mui("#task-img"); // 要上传的 img 标签

mui.each(imgsArr, function(index, item){

	createUp(item)
})
function createUp (files) {
    var task = plus.uploader.createUpload(rul,
        {method:"POST"},
        function(t,status){ //上传完成
            if(status==200){
            	console.log("上传成功："+t.responseText);
            }else{
                console.log("上传失败："+status);
            }
        }
    );
    //添加其他参数
    task.addData("key","");
    task.addData("userid",1);
    task.addData("title","");
  ;	
    // 页面中要上传的 图片路径
    task.addFile(files.src,{key:files.src});
    task.start();
}

}