MUI上传图片备忘

DamonHu

2016 年 10 月 24 日

13119 次浏览

暂无评论

6807字数

iOS开发

上一篇说了用ios做了一个上传图片的demo，今天用MUI框架做了下使用js上传图片的demo，因为mui使用的JS，所以其实这个备忘也适合其他的js使用。现在说下基础的demo思路。

一、设置页面图片和按钮

这个是随手布局的，图片路径写的本地图片，也可以写网络链接图片，比如http://dongge.org/blog/logo.gif

<div class="mui-content">
	    <button type="button" onclick="ssss()" class="mui-btn mui-btn-blue mui-btn-block">上传按钮</button>
	    <div id="imgg">
	    	<img id="hudd" src="13.jpg"/>
	    	<img id="hudd2" src="14.png"/>
	    </div>
</div>

二、JS将图片转换为base64编码

因为服务器要的是图片的base64编码，而不是http:// 链接地址，所以第一步需要将图片转换为base64编码

function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
	}

注意这个函数的参数img是img对象，不是img的src地址，是这么用的

getBase64Image(document.getElementById("hudd"))

三、数据处理

getBase64Image的到的数据格式是类似于这样的，后面的是图片的base64编码的字符串，省略下

data:image/png;base64,iVBORw0KGgo.........

因为我们服务器只要后面的字符串，不要前面的data:image/png;base64标志，所以需要处理下，用,分割下字符串，只用逗号后面的数据

var stt = getBase64Image(document.getElementById("hudd"));
var stt2 = getBase64Image(document.getElementById("hudd2"));
imgArray.push(stt);
imgArray.push(stt2);
		
for (var i = 0;i<imgArray.length;i++) {
	var strs = new Array();
	strs = imgArray[i].split(",");
	var imgPath = strs[strs.length-1];
	imgArr.push(imgPath);
}

把分割好的字符串专门存到imgArr这个数组中，然后把这个数组转换为json串上传到服务器即可

var imgJson = JSON.stringify(imgArr);

四、将处理好的json串上传到服务器

使用mui自己封装的上传格式，post上传到服务器即可

mui.ajax("http://adapp.jidonggame.com/upload.html",{
	data:{
	    'pic':imgJson
	},
	type:'post',
	timeout:10000,
	dataType:'json',
	success:function (data) {
		mui.alert(JSON.stringify(data));	
	},
	error:function (xhr,type,errorThrown) {
		console.log(xhr+","+type+","+errorThrown);
	}
});

五、整个文件内容

上面说了思路之后，这个是整个html文件的内容，可以参考下

<!DOCTYPE html>
<html>
<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"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<script type="text/javascript">
	function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
	}
	
	function ssss () {
		console.log("shangchaun");

		var imgArray = new Array();	//图片数组
		var imgArr = new Array();//图片base64数组
		
//		var reder = new FileReader();
//		var stt = reder.readAsDataURL(document.getElementById("hudd").src);
		var stt = getBase64Image(document.getElementById("hudd"));
		var stt2 = getBase64Image(document.getElementById("hudd2"));
		imgArray.push(stt);
		imgArray.push(stt2);
		//处理base64编码之后的字符串
		for (var i = 0;i<imgArray.length;i++) {
			var strs = new Array();
			strs = imgArray[i].split(",");
			var imgPath = strs[strs.length-1];
			imgArr.push(imgPath);
		}
		//转换为json串
		var imgJson = JSON.stringify(imgArr);		
		//上传
		mui.ajax("http://adapp.jidonggame.com/upload.html",{
			data:{
				'pic':imgJson
			},
			type:'post',
			timeout:10000,
			dataType:'json',
			success:function (data) {
				mui.alert(JSON.stringify(data));
				
			},
			error:function (xhr,type,errorThrown) {
				console.log(xhr+","+type+","+errorThrown);
			}
		});
	}    	
	</script>
	<div class="mui-content">
	    <button type="button" onclick="ssss()" class="mui-btn mui-btn-blue mui-btn-block">上传按钮</button>
	    <div id="imgg">
	    	<img id="hudd" src="13.jpg"/>
	    	<img id="hudd2" src="14.png"/>
	    </div>
	</div>
</body>
</html>