• 原生图片上传,图片格式和图片大小处理


    html页面代码:

    <div class="layui-inline">
    <label class="layui-form-label">标识图:</label>
    <div class="layui-upload-drag" style="padding: 20px;top: 5px;">
    <i class="layui-icon">�</i>
    <!-- 原生上传控件-->
    <input accept=".jpg,.jpeg,.png" class="hidden" id="chooseImage" name="" type="file">
    <img id="showImg" src="">
    </div>
    </div>

    js代码:

    $('#chooseImage').on('change', function (e) {
    // 检查是否是图片
    var filePath = $(this).val(),
    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();//获取文件后缀名
    //检查后缀名
    if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
    showError('文件格式必须为:png/jpg/jpeg');//showError是另外写的一个显示错误信息的function
    return;
    }

    //获取并记录图片的base64编码
    var reader = new FileReader();
    if(((e.target.files[0].size).toFixed(2))>=(1024*1024)){
    layer.msg('请上传小于1M的图片!', {icon: 5});
    return false;
    }
    reader.readAsDataURL(e.target.files[0]); // 读出 base64
    reader.onloadend = function () {
    // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
    var dataURL = reader.result;//base64
    var index = dataURL.lastIndexOf("\,");
    //截取data:image/png;base64, 保留后面的内容
    //var icon = dataURL.substring(index + 1, dataURL.length);
    //$("#icon").val(icon);

    // 显示图片
    $('#showImg').attr('src', dataURL);
    var div = document.getElementById("showImg");
    div.style.width = 100 + "px";
    div.style.height = 100 + "px"; //注意获取的ID时img的ID

    };
    });
  • 相关阅读:
    java中如何获得系统路径!(项目的路径)
    纯DOS学习笔记
    Ubuntu 初始配置
    原码、反码、补码
    几个小程序
    数据类型字符串、字节
    rdesktop方法(Linux to Windows)
    Python语言说明
    Manjaro 初始配置anacondapycharmopencvtensorflow
    【转】谈谈MATLAB中cell数据类型
  • 原文地址:https://www.cnblogs.com/LUCKY-Y/p/13614401.html
Copyright © 2020-2023  润新知