js 移动端 多图上传 预览 删除 base64转为url 传给后端

说下主要的逻辑，首先是利用input type="file"，上传文件，然后判断文件类型是否是图片，这里要注意（multiple，安卓一次一张，ios可以多张）。

接着把本地图片转为base64发给后端，后端返回url，我们把它保存在数组里面，最后发给后端的是一个数组（里面放url）。删除操作也是一样，把数组里面对应的删掉就可以啦。

css：

　　 * {margin: 0;padding: 0;}
    /*图片上传*/
    html,body { 100%;height: 100%;}
    .container { 100%;height: 100%;overflow: auto;clear: both;}
    .z_photo { 5rem;height: 5rem;padding: 0.3rem;overflow: auto;clear: both;margin: 1rem auto;border: 1px solid #555;}
    .z_photo img { 1rem;height: 1rem;}
    .z_addImg {float: left;margin-right: 0.2rem;}
    .z_file { 1rem;height: 1rem;background: url(z_add.png) no-repeat;background-size: 100% 100%;float: left;margin-right: 0.2rem;}
    .z_file input::-webkit-file-upload-button { 1rem;height: 1rem;border: none;position: absolute;outline: 0;opacity: 0;}
    .z_file input#file {display: block; auto;border: 0;vertical-align: middle;}
    /*遮罩层*/
    .z_mask { 100%;height: 100%;background: rgba(0, 0, 0, .5);position: fixed;top: 0;left: 0;z-index: 999;display: none;}
    .z_alert { 3rem;height: 2rem;border-radius: .2rem;background: #fff;font-size: .24rem;text-align: center;position: absolute;left: 50%;top: 50%;margin-left: -1.5rem;margin-top: -2rem;}
    .z_alert p:nth-child(1) {line-height: 1.5rem;}
    .z_alert p:nth-child(2) span {display: inline-block; 49%;height: .5rem;line-height: .5rem;float: left;border-top: 1px solid #ddd;}
    .z_cancel {border-right: 1px solid #ddd;}

html：

<div class="container">
    <!--    照片添加    -->
    <div class="z_photo">
        <div class="z_file">
            <input type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
        </div>
    </div>
    <!--遮罩层-->
    <div class="z_mask">
        <!--弹出框-->
        <div class="z_alert">
            <p>确定要删除这张图片吗？</p>
            <p>
                <span class="z_cancel">取消</span>
                <span class="z_sure">确定</span>
            </p>
        </div>
    </div>
</div>

js：

<script type="text/javascript">
    //px转换为rem
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 640) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    function imgChange(obj1, obj2) {
        //获取点击的文本框
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = 0; i < fileList.length; i++) {
            var imgUrl = window.URL.createObjectURL(file.files[i]);
            imgArr.push(imgUrl);
            var img = document.createElement("img");
            img.setAttribute("src", imgArr[i]);
            var imgAdd = document.createElement("div");
            imgAdd.setAttribute("class", "z_addImg");
            imgAdd.appendChild(img);
            imgContainer.appendChild(imgAdd);
            convertImgToBase64(imgUrl, function(base64Img){
              // Base64DataURL
              console.log(base64Img)
              //发请请求，把base64转为url，然后存到数组里面
            });
        };
        imgRemove();
    };

    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0,k = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function() {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function() {
                    mask.style.display = "none";
                };
                sure.onclick = function() {
                    mask.style.display = "none";
                    t.style.display = "none";
                    /*删除图片,删掉数组里面对应的index*/
                    console.log(t.index)
                };

            }
        };
    };
    //将本地图片转为base64
    function convertImgToBase64(url, callback, outputFormat){
      var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
        canvas = null; 
      };
      img.src = url;
    }
</script>