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

    };
    });
  • 相关阅读:
    Maven3核心技术(笔记三)
    解决Ubuntu下Sublime Text 3无法输入中文
    python3项目之数据可视化
    Python模块Pygame安装
    PHP命名空间(Namespace)
    git的安装使用和代码自动部署
    input:text 的value 和 attribute('value') 不是一回事
    touch事件学习
    获得 选中文字
    linux使用crontab实现PHP执行定时任务及codeiginter参数传递相关
  • 原文地址:https://www.cnblogs.com/LUCKY-Y/p/13614401.html
Copyright © 2011-2022 走看看