上一篇说了用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(&quot;hudd&quot;))</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&nbsp;stt&nbsp;=&nbsp;getBase64Image(document.getElementById(&quot;hudd&quot;));

var stt2 = getBase64Image(document.getElementById("hudd2"));
imgArray.push(stt);
imgArray.push(stt2);

for (var i = 0;i<imgArray.length;i++) {

var&nbsp;strs&nbsp;=&nbsp;new&nbsp;Array();
strs&nbsp;=&nbsp;imgArray[i].split(&quot;,&quot;);
var&nbsp;imgPath&nbsp;=&nbsp;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:{
&nbsp;&nbsp;&nbsp;&nbsp;&#39;pic&#39;:imgJson
},
type:&#39;post&#39;,
timeout:10000,
dataType:&#39;json&#39;,
success:function&nbsp;(data)&nbsp;{
    mui.alert(JSON.stringify(data));    
},
error:function&nbsp;(xhr,type,errorThrown)&nbsp;{
    console.log(xhr+&quot;,&quot;+type+&quot;,&quot;+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>

&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;
function&nbsp;getBase64Image(img)&nbsp;{

        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&nbsp;ssss&nbsp;()&nbsp;{
    console.log(&quot;shangchaun&quot;);

    var&nbsp;imgArray&nbsp;=&nbsp;new&nbsp;Array();    //图片数组
    var&nbsp;imgArr&nbsp;=&nbsp;new&nbsp;Array();//图片base64数组
    

// var reder = new FileReader();
// var stt = reder.readAsDataURL(document.getElementById("hudd").src);

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

</body>
</html>

六、参考文章

Last modification:January 1st, 1970 at 08:00 am
如果觉得我的文章对你有用,请随意打赏: ☞已打赏列表