上一篇说了用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;}</pre><p>注意这个函数的参数img是img对象,不是img的src地址,是这么用的</p><pre class="prettyprint lang-js linenums">getBase64Image(document.getElementById("hudd"))</pre><h2>三、数据处理<br/></h2><p>getBase64Image的到的数据格式是类似于这样的,后面的是图片的base64编码的字符串,省略下</p><pre class="prettyprint lang-cpp linenums">data:image/png;base64,iVBORw0KGgo.........</pre><p>因为我们服务器只要后面的字符串,不要前面的data:image/png;base64标志,所以需要处理下,用,分割下字符串,只用逗号后面的数据</p><pre class="prettyprint lang-cpp linenums">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串上传到服务器<br/>
使用mui自己封装的上传格式,post上传到服务器即可<br/>
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日起,『转载以及大段采集进行后续编辑』须注明本文标题和链接!否则禁止所有转载和采集行为!
☟☟如文章有用,可点击一次下方广告支持一下☟☟