zoukankan      html  css  js  c++  java
  • 原生图片上传,图片格式和图片大小处理

    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

    };
    });
  • 相关阅读:
    【已解决】github中git push origin master出错:error: failed to push some refs to
    好记心不如烂笔头,ssh登录 The authenticity of host 192.168.0.xxx can't be established. 的问题
    THINKPHP 5.0目录结构
    thinkphp5.0入口文件
    thinkphp5.0 生命周期
    thinkphp5.0 架构
    Django template
    Django queryset
    Django model
    Python unittest
  • 原文地址:https://www.cnblogs.com/LUCKY-Y/p/13614401.html
Copyright © 2011-2022 走看看