HTML5 --- 上傳圖片base64編碼顯示縮略圖

<li>
    <label for="username">營業執照</label>
    <a href="javascript:void(0);" class="cert-btn-blue-add"><span class="icon-add-white"></span>
        <input type="file" capture="camera"/>添加圖片
    </a>
    <a class="cert-arrow-right-2x"></a>
</li>


$('input[type=file]').change(function(){
    var inputObj=$(this);//input對象
    var liObj=$(this).parent('a').parent('li');//input所在li對象
    var aObj=$(this).parent('a.cert-btn-blue-add');//上傳按鈕
    var oFile=this.files[0];
    var oReader = new FileReader();
    oReader.onload = function(e){
        var sBase64 = e.target.result; // 部分Android下base64字符串格式不完整
    if(window.gIsAndroid && sBase64.indexOf("data:image/") != 0){
        var sMime = sName.split(".").pop().toLowerCase();
        sBase64 = sBase64.replace("base64,", "image/" + sMime + ";base64,");
    }
    var src=sBase64;
    var img = new Image();
        img.onload = function () {
            liObj.append(img);
            liObj.find('a.cert-arrow-right-2x').show();
        };
        img.src = typeof src === 'string' ? src : URL.createObjectURL(src); aObj.hide(); sBase64 = null;
    };
    oReader.readAsDataURL(oFile);
})


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章