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");
        }
    }

}

最终展示图

JS将图片文件转为64位字符串再post到接口上传图片的更多相关文章

  1. js如何将选中图片文件转换成Base64字符串?

    如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...

  2. 检查DLL,EXE文件是64位或者32位的方法

    检查DLL,EXE文件是64位或者32位:输入corflags <assembly path>:

  3. .netcore 文件上传转为base64位字符串

    .netcore文件上传Api接口,和正常的webForm提交类似,只是用postman测试接口时,记得给form表单命名,否则获取上传文件数量一直为0 后端代码 using System; usin ...

  4. js 将图片文件转换成base64

      1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...

  5. 利用linux判断elf文件是64位还是32位

    readelf 命令,参数为-h 例如 文件名为python >>>readelf -h python 得到的是ELF Header中的项Magic 第五个数 02时为64位,01时 ...

  6. Android从本地选择图片文件转为Bitmap,并用zxing解析Bitmap

    如何从本地选择图片文件 使用Intent调用系统相册后,onActivityResult函数返回的是Uri格式的路径 /** * 打开系统相册 */ private void openSysAlbum ...

  7. api图片传输,转成64位字符串进行传输

    byte[] getImageByte = HttpHelper.getImageByte(HttpContext.Current.Server.MapPath(("~/UploadFile ...

  8. 64位系统下注册32位dll文件

    64位系统下注册32位dll文件 在64位系统里注册32位软件所需的一些dll会提示不兼容,大概因为32 位进程不能加载64位Dll,64位进程也不可以加载32的导致. 若要支持的32 位和64 位C ...

  9. win7(64位)Sql server 用T-sql读取本地数据文件dbf的数据文件

    原文地址:https://www.cnblogs.com/cl1006/p/9924066.html 第一步启用Ad Hoc Distributed Queries  在SQLserver执行以下的语 ...

随机推荐

  1. Auty自动化测试框架第二篇——读取与执行脚本列表

    [本文出自天外归云的博客园] 在Auty中的文件结构,lib目录下的read_selection.py和execute_selection.py文件:

  2. Linux Install VirtualBox

    添加源: cd /etc/yum.repos.dwget http://download.virtualbox.org/virtualbox/rpm/rhel/virtualbox.repo 下面3个 ...

  3. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  4. JAVA 文本框、密码框、标签

    //文本框,密码框,标签 import java.awt.*; import javax.swing.*; public class Jiemian5 extends JFrame{ JPanel m ...

  5. xp宿主机和VMware下Ubuntu12.04共享文件夹

    VMware下Windows与Linux共享文件的方法有很多,比如Samba等等,我这里介绍简单地通过设置VMware来达到共享的目的. 打开VMware的设置,在"options" ...

  6. ClassLoader载入指定的类需注意六个细节或报ClassNotFundEception异常总结

    项目中,载入指定的类反射调用方法一直报类找不到,经过数百次的測试.对这样的问题有了一个又一次的认识,特总结.记录.分享例如以下: 1.路径中尽可能用"/"或者File.separa ...

  7. oracle数据库命令-持续更新

    一.系统命令 登录 dba用户命令 sqlplus / as sysdba 2. 用户命令 删除用户 DROP USER **** CASCADE; DROP SCHEMA **** CASCADE; ...

  8. 导出CSV表格数据

    <?php class Csv{ //导出csv文件 public function put_csv($list,$title){ $file_name="CSV".date ...

  9. 基于SSM实现的简易员工管理系统(网站上线篇)

    经历无数苦难,好不容易,网站终于上线了.=.=内牛满面ing.chengmingwei.top就是本员工管理系统的主页啦.是的,很简陋,但是毕竟是第一次嘛,所以慢慢来嘛. 如上次所说的(网站简介,见: ...

  10. MYSQL必知必会学习笔记

    8.1.1 百分号( %)通配符最常使用的通配符是百分号( %).在搜索串中, %表示任何字符出现任意次数.例如,为了找出所有以词jet起头的产品,可使用以下SELECT语句:SELECT prod_ ...