html上传图片后,在页面显示上传的图片

html上传图片后,在页面显示上传的图片

html上传图片后,在页面显示上传的图片

1、html

   <form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form">
            <input type="file" id="chooseImage" name="file">
            <!-- 保存用户自定义的背景图片 -->
            <img id="cropedBigImg" value='custom' alt="lorem ipsum dolor sit" data-address='' title="自定义背景"/>
      </form>

2、js

 $('#chooseImage').on('change',function(){
        var filePath = $(this).val();         //获取到input的value,里面是文件的路径
        var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
        // 检查是否是图片
        if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
            error_prompt_alert('上传错误,文件格式必须为:png/jpg/jpeg');
            return;  
        }
        var src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
        $('#cropedBigImg').attr('src',src);
});

 

原文:https://blog.csdn.net/qq_29582277/article/details/83185363

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112308.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 软件评测师-自动化测试技术

    软件评测师-自动化测试技术一、概述1.自动化测试是把人为驱动的测试行为转化为机器执行的一种过程,模拟手工测试步骤,通过由程序语言编制的测试脚本,自动地完成软件的测试设计、单元测试、功能测试、性能测试等工作,包括测试活动的自动

    2022年7月1日
  • 保存和检索字符串

    保存和检索字符串

    2022年1月11日
  • 格式化hdfs的命令_hadoop的启动命令

    格式化hdfs的命令_hadoop的启动命令总结:上传文件:put、copyFromLocal、moveFromLocal下载文件:get、copyToLocal、moveToLocal查看文件:text、cat、tail合并文件:getmerge命令详解HDFS命令基本格式:hadoopfs-cmd<args>表格:选项名称使用格式含义-ls-ls查看指定路径的当前目录结构-lsr-lsr递归查看指定路径的目录结…

    2022年9月1日
  • 双管显示

    双管显示

    2021年8月15日
  • bfp是什么电子元件_ad原理图器件旁边有红色波浪线

    bfp是什么电子元件_ad原理图器件旁边有红色波浪线ISPpipelineDBS:校准经过OBC之前不同像素暗电流的差值。因为器件原因,会存在暗电流,存在暗电流的情况下会导致偏色。OBC:sensor电路本身存在暗电流,没有光线的时候,像素会有输出,OBC减去暗电流,找到0基准。LensShadding:镜头阴影校正镜头是一个凸透镜,在接收光线时,成像较远时,会造成斜光束慢慢减少,图片中心较亮,四周比较暗。PGN:3A统计计算模块(计算awb、af、ae)UDM:利用颜色插值,光分为r,g,b三原色,g是亮度,通过g的插值,得到一下.

    2022年9月4日
  • mac phpstrom 激活码【2022最新】「建议收藏」

    (mac phpstrom 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html4KDDGND3CI-eyJsa…

    2022年4月1日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号