這幾天公司有一個換綁銀行卡的需求，就用上傳圖片的功能（上傳身份證和銀行卡），然後我百度了一下，綜合了網上的資料搞定了，現在我把自己的經驗分享給大家一下
首先呢，我們是引用外掛的，那肯定是要把外掛下載下來，然後進行引用的，下載的地址https://github.com/think2011/localResizeIMG/archive/4.9.35.zip，就在這裡下載吧，別的地方是需要積分的，可能有的人沒有積分。開啟裡面的壓縮包，發現裡面有很多內容，但是我們是不需要這麼多， 各取所需就好了
下面是我拿的資源

其實，還有一個資源，是test/index.js,但是我把裡面的內容進行了相應的修改，然後名字也換為changeCard.js了

我的changeCard.js對應的程式碼如下：

document.querySelector('#input1').addEventListener('change', function () {
    var that = this;
    lrz(that.files[0], {
        width: 1024
    })
        .then(function (rst) {
            var img        = new Image(),
                div        = document.createElement('div'
 
),
                p          = document.createElement('p'),
                sourceSize = toFixed2(that.files[0].size / 1024),
                resultSize = toFixed2(rst.base64Len / 1024),
                scale      = parseInt(100 - (resultSize / sourceSize * 100));
                p.style.fontSize = 13 + 'px'
 
;
                p.style.width = 100+'%';
                div.appendChild(img);
                div.appendChild(p);

                img.onload = function () {
                    $("#upload-container").html("");
                    $(".imgboxa").html("");
                    document.querySelector('#upload-container').appendChild(div);
                };

                img.src = rst.base64;

                return rst;
        });
});
    function toFixed2 (num) {
        return parseFloat(+num.toFixed(2));
    }

/**
 * 替換字串 !{}
 * @param obj
 * @returns {String}
 * @example
 * '我是!{str}'.render({str: '測試'});
 */
String.prototype.render = function (obj) {
    var str = this, reg;

    Object.keys(obj).forEach(function (v) {
        reg = new RegExp('\\!\\{' + v + '\\}', 'g');
        str = str.replace(reg, obj[v]);
    });

    return str;
};

/**
 * 觸發事件 - 只是為了相容演示demo而已
 * @param element
 * @param event
 * @returns {boolean}
 */
function fireEvent (element, event) {
    var evt;

    if (document.createEventObject) {
        // IE瀏覽器支援fireEvent方法
        evt = document.createEventObject();
        return element.fireEvent('on' + event, evt)
    }
    else {
        // 其他標準瀏覽器使用dispatchEvent方法
        evt = document.createEvent('HTMLEvents');
        // initEvent接受3個引數：
        // 事件型別，是否冒泡，是否阻止瀏覽器的預設行為
        evt.initEvent(event, true, true);
        return !element.dispatchEvent(evt);
    }
}

下圖是我工作中要實現的效果：

看到這裡，又有一個問題了，其實上傳圖片就是

<input type="file" capture="camera" accept="image/*" name="logo">

capture（捕獲的意思）表示呼叫相簿相機camera，錄音機video和攝像機audio
accept 表示，直接開啟系統檔案目錄。（其實html5的input:file標籤還支援一個multiple屬性，表示可以支援多選。加上這個multiple後，capture就沒啥用了，因為multiple是專門yong用來支援多選的）。ok，稍作解釋一下

正常情況下，我們的點選上傳圖片的樣式超級醜，大家應該見過，如下：

好醜的啊，是不是，那我們怎麼實現自己想要的樣式呢，哈哈，以我的程式碼為例吧

頁面：

    <div class="imgBox1">
        <div class="title1">一、本人與身份證、新銀行卡的合照</div>
        <div id="upload-container"><img class="addcarimg1" id="blah1" src="https://cdn.laicunba.com/lcb/activity/Group.png" style=""/></div>
        <a href="javascript:;" class="imgboxa">
            <span class="iconadd jiaNo1">+</span></br>
            <span class="txt textNo1">上傳圖片</span>
            <input  type='file' accept="image/*"  class="input1" id="input1"/>
        </a>
        <div class="textNo1">手持身份證、新銀行卡的上半身照效果最佳</div>
    </div>

對應的樣式

.imgBox2{
        position:relative;
        text-align:center;
        width:8.65rem;
        height:6rem;
        background:rgba(255,255,255,1);
        border-radius:0.13rem;
        margin: 0.3rem auto;
        padding: 0.5rem;
        }
#upload-container{
        width: 8rem;
        height: 3rem;
        overflow: hidden;
        margin: 1rem auto 0rem;
       }
.addcarimg1{
        width:4rem;
        height:3rem;
        overflow:hidden;
   }
.imgboxa{
        position: absolute;
        color:#999;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%,-50%,0);
        -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
        -webkit-transform: translate3d(-50%,-50%,0);
        -o-transform: translate3d(-50%,-50%,0);
}
.input1 {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
        opacity: 0;
}

頁面美化完畢，就要開始寫功能了，直接引入就好啦

<script src="lrz.all.bundle.js"></script>

就可以實現功能了，看看放在手機上的效果哈

完美，本來以為這樣就好了，但是在跟後臺的聯調過程中，還是出現了問題，我解析出來的base64和後臺java解析出來的不一樣 ，然後就導致我上傳的圖片，在後臺獲取的時候，讀不出來，然後百度了一篇文章，地址為
https://blog.csdn.net/zhongbaolin/article/details/49817611
我讓後臺看了一下，根據這個就解決了，如果你們以後遇到這個問題，也讓後臺看一下吧，雖然我不懂後臺程式碼，哈哈
over