JS将图片文件转为64位字符串再post到接口上传图片

HTML：

        <div class="ai-item upload-id-img">
                <p>上传身份证照片</p>
                <div class="img-box">
                    <div class="positive-img">
                        <input type="file" id="img1" name="zm" class="inputFile">
                        <label for="img1">
                            <img src="http://pic.biyabi.com/h5/images/fm-img.png" id="preview">
                        </label>
                    </div>
                    <div class="opposite-img">
                        <input type="file" id="img2" name="fm" class="inputFile">
                        <label for="img2">
                            <img src="http://pic.biyabi.com/h5/images/zm-img.png" id="preview2">
                        </label>
                    </div>
                </div>
            </div>

可以通过给input上传控件设置样式不显示,给对应的的img标签注册点击事件来点击上传控件，相当于间接点击了上传控件

.inputFile {
    width: 1px;
    height: 1px;
    opacity:;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

js 实现：

  //编辑页面上传图片
    $('#img1').on('change', function () {
        setImgPreview('img1', 'preview');
    });
    $('#img2').on('change', function () {
        setImgPreview('img2', 'preview2');
    });

//上传图片
function setImgPreview(imgObj, prev) {
    var docObj = $("#" + imgObj);
    var imgObjPreview = $("#" + prev);
    //异步上传图片
    uploadImage(docObj, imgObjPreview)
}

function uploadImage(docObj, imgObjPreview) {
    //判断是否有选择上传文件
    var imgPath = docObj.val();
    if (imgPath == "") {
        //alert("请选择上传图片！");
        hDialog.show({ type: 'toast', toastText: '请选择上传图片！', toastTime: 3000, hasMask: false });
        return;
    }
    //判断上传文件的后缀名
    var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1).toLowerCase();
    if (strExtension != 'jpg' && strExtension != 'gif'
    && strExtension != 'png' && strExtension != 'bmp') {
        //alert("请选择图片文件！");
        hDialog.show({ type: 'toast', toastText: '请选择图片文件！', toastTime: 3000, hasMask: false });
        return;
    }

    var ImgObj = new Image();      //建立一个图像对象
    var AllowImgFileSize = 2100000;    //上传图片最大值(单位字节)（ 2 M = 2097152 B ）
    ImgObj.src = docObj[0].value;
    //checkSizeofImg();
    //function checkSizeofImg() {
    //    if (ImgObj.readyState != "complete") { //如果图像是未加载完成进行循环检测
    //        setTimeout("checkSizeofImg()", 500);
    //        //return false;
    //    }
    //}

    //ImgObj.onload = function () {
    //    ImgFileSize = Math.round(ImgObj.fileSize / 1024 * 100) / 100;//取得图片文件的大小
    //    if (AllowImgFileSize != 0 && AllowImgFileSize < ImgFileSize) {
    //        hDialog.show({ type: 'toast', toastText: '上传失败，请上传不大于2M的图片！', toastTime: 3000, hasMask: false });
    //        return;
    //    }
    //}

    //var file = $("#" + imgObj).files[0];
    var reader = new FileReader();
    var file = docObj[0].files[0];
    var imgUrlBase64;
    if (file) {
        //将文件以Data URL形式读入页面
        imgUrlBase64 = reader.readAsDataURL(file);
        reader.onload = function (e) {
            //var result = document.getElementById("result");
            var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;
            if (AllowImgFileSize != 0 && AllowImgFileSize < ImgFileSize) {
                hDialog.show({ type: 'toast', toastText: '上传失败，请上传不大于2M的图片！', toastTime: 3000, hasMask: false });
                return;
            }

            //显示文件
            imgObjPreview.attr("src", reader.result);

            //字符串形式上传  //data:image/png;base64,
            var imgDataBase64 = imgObjPreview.attr("src").substring(imgObjPreview.attr("src").indexOf(",") + 1);
            $.ajax({
                type: 'post',
                dataType: 'json',
                data: { "_Image": imgDataBase64, "_format": "." + strExtension },
                url: ajaxUrl + 'UploadIDCartImageBase64',
                success: function (data) {
                    if (data) {
                        imgObjPreview.attr("src", data);
                        $("." + docObj.attr("name")).val(data);
                        docObj.parent().find('.logo-img2').remove();
                    }
                },
                //此接口返回的图片路径是error的响应文本
                error: function (xhr) {
                    imgObjPreview.attr("src", xhr.responseText);
                    $("." + docObj.attr("name")).val(xhr.responseText);
                    docObj.parent().find('.logo-img2').remove();
                },
                beforeSend: function () {

                    var logoImg = '<img src="../images/loanding.gif" class="logo-img2" style="position: absolute;left: 50%;top: 50%;width: 20px; height: 20px; -webkit-transform: translate(-50%,-50%);">';
                    docObj.parent().append(logoImg);
                }
            });
        }
        reader.onerror = function () {
            alert("error");
        }
    }

}

最终展示图