js 移動端 多圖上傳 預覽 刪除 base64轉爲url 傳給後端

說下主要的邏輯，首先是利用input type="file"，上傳文件，而後判斷文件類型是不是圖片，這裏要注意（multiple，安卓一次一張，ios能夠多張）。

接着把本地圖片轉爲base64發給後端，後端返回url，咱們把它保存在數組裏面，最後發給後端的是一個數組（裏面放url）。刪除操做也是同樣，把數組裏面對應的刪掉就能夠啦。

css：

　　 * {margin: 0;padding: 0;}
    /*圖片上傳*/
    html,body {width: 100%;height: 100%;}
    .container {width: 100%;height: 100%;overflow: auto;clear: both;}
    .z_photo {width: 5rem;height: 5rem;padding: 0.3rem;overflow: auto;clear: both;margin: 1rem auto;border: 1px solid #555;}
    .z_photo img {width: 1rem;height: 1rem;}
    .z_addImg {float: left;margin-right: 0.2rem;}
    .z_file {width: 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 {width: 1rem;height: 1rem;border: none;position: absolute;outline: 0;opacity: 0;}
    .z_file input#file {display: block;width: auto;border: 0;vertical-align: middle;}
    /*遮罩層*/
    .z_mask {width: 100%;height: 100%;background: rgba(0, 0, 0, .5);position: fixed;top: 0;left: 0;z-index: 999;display: none;}
    .z_alert {width: 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;width: 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>