图片上传转base64并预览

图片上传转base,赋值给img标签的src属性显示在页面,将转换后的结果提交给后端,返回url。

  <!-- mumultiple属性 规定可接受多个值 -->
  <input type="file" name="file" id="upload_file" multiple="multiple" />
  <input type="hidden" name="upload_base" id="upload_base" />
  <span>图片预览</span>
  <img id="upload_show" />
document.getElementById('upload_file').onchange = function(){
        var fileObj = this.files;
        var reader = new FileReader();
        // 转base64
        reader.readAsDataURL(fileObj[0]);
        reader.onload = function(){
            // 将转换后的编码存入src实现预览
            document.getElementById("upload_show").setAttribute("src", this.result);
            // 将转换后的结果作为 type为hidden 的 input 的值,提交给后台
            document.getElementById("upload_base").value = this.result;
       }
 }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,119评论 19 139
  • 5 分享内容到你的网站 上一章中,你在网站中构建了用户注册和认证。你学会了如何为用户创建自定义的个人资料模型,并添...
    lakerszhy阅读 1,691评论 5 16
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,603评论 1 19
  • 《理想国》以对话体的方式来展现现实生活中的正义以及构建正义的模型,值得一提的是对话人物的出场顺序。 第一卷,由格劳...
    鲸北晨阅读 4,462评论 6 12
  • http://www.linuxidc.com/Linux/2015-08/120940.htm shuffle的...
    点点渔火阅读 732评论 0 0