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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Linux下性能监控工具介绍

    Linux下性能监控工具介绍

    2021年8月13日
    53
  • redflag linux安装教程,硬盘安装REDFlag LINUX体会

    redflag linux安装教程,硬盘安装REDFlag LINUX体会我是一名LINUX的初学者,在看了许多LINUX的介绍之后,在本着大胆和心细的原则下,尝试了一回安装LINUX。现把我的一些心得和体会和大家分享,希望对一些入门级的朋友有所帮助。我装的是REDFlagLINUX,我原来的操作系统是WINXP,本着学习LINUX的和省钱至上的想法,我选择了安装WINXP和LINUX的双系统,我在网上下载了LINUX的ISO文件,先保存在随意的一个硬盘里,只要不是…

    2022年8月20日
    3
  • TCP/IP之Traceroute程序

    TCP/IP之Traceroute程序定义:Traceroute程序时一个能更深入探索TCP/IP协议的方便可用的工具。功能:Traceroute程序可以让我们看到IP数据报从一台主机传到另一台主机所经过的路由。 Traceroute程序还可以让我们使用IP源路由选项。存在意义:不是所有路由器都支持记录路由选项 记录路由一般是单向的选项,记录地址翻了一番(一来一回) IP首部中留给选项的空间有限,不能存放当前大多…

    2022年6月20日
    29
  • Nios II 向板上下载程序时错误解决

    Nios II 向板上下载程序时错误解决

    2021年8月24日
    64
  • 数字逻辑中的与或非异或的运算规律_执行逻辑与或非运算

    数字逻辑中的与或非异或的运算规律_执行逻辑与或非运算计算机中的逻辑运算又被称作为“布尔运算”,分别为:逻辑**与**运算、逻辑**或**运算,逻辑**非**运算,“逻辑**异或**运算。此外在门电路中还有:**同或**运算、**与非**运算、**或非**运算。共七种。……

    2022年10月12日
    0
  • 简述MD5加密[通俗易懂]

    简述MD5加密[通俗易懂]MD5加密publicclassMD5{ /**四个链接变量标准幻数(按大端字节序存储-高位字节排放在内存的低地址端(即该值的起始地址),低位字节排放在内存的高地址端)*/privatefinalintA=0x67452301;//01234567privatefinalintB=0xefcdab89;//89abcdef…

    2022年7月11日
    19

发表回复

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

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