上一篇说了用ios做了一个上传图片的demo，今天用MUI框架做了下使用js上传图片的demo，因为mui使用的JS，所以其实这个备忘也适合其他的js使用。现在说下基础的demo思路。
一、设置页面图片和按钮
这个是随手布局的，图片路径写的本地图片，也可以写网络链接图片，比如http://www.hudongdong.com/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>六、参考文章
版权属于：胡东东博客
本文链接：http://blog.hudongdong.com/mui/377.html
自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！
☟☟如文章有用，可点击一次下方广告支持一下☟☟
