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

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

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

css：

　　 * {margin: ;padding: ;}
    /*图片上传*/
    html,body {width: %;height: %;}
    .container {width: %;height: %;overflow: auto;clear: both;}
    .z_photo {width: 5rem;height: 5rem;padding: .3rem;overflow: auto;clear: both;margin: 1rem auto;border: 1px solid #;}
    .z_photo img {width: 1rem;height: 1rem;}
    .z_addImg {float: left;margin-right: .2rem;}
    .z_file {width: 1rem;height: 1rem;background: url(z_add.png) no-repeat;background-size: % %;float: left;margin-right: .2rem;}
    .z_file input::-webkit-file-upload-button {width: 1rem;height: 1rem;border: none;position: absolute;outline: ;opacity: ;}
    .z_file input#file {display: block;width: auto;border: ;vertical-align: middle;}
    /*遮罩层*/
    .z_mask {width: %;height: %;background: rgba(, , , .);position: fixed;top: ;left: ;z-index: ;display: none;}
    .z_alert {width: 3rem;height: 2rem;border-radius: .2rem;background: #fff;font-size: .24rem;text-align: center;position: absolute;left: %;top: %;margin-left: -.5rem;margin-top: -2rem;}
    .z_alert p:nth-child() {line-height: .5rem;}
    .z_alert p:nth-child() span {display: inline-block;width: %;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 >= ) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize =  * (clientWidth / ) + '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)[];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[];
        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = ; 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")[];
        var cancel = document.getElementsByClassName("z_cancel")[];
        var sure = document.getElementsByClassName("z_sure")[];
        for (var j = ,k = ; 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,,);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
        canvas = null;
      };
      img.src = url;
    }
</script>