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


相关推荐

  • js查询手机号码归属地[通俗易懂]

    js查询手机号码归属地[通俗易懂]js查询手机号码归属地

    2022年7月22日
    15
  • Navicat15.0.25 激活码3月最新在线激活

    Navicat15.0.25 激活码3月最新在线激活,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月14日
    126
  • 5种方式实现 Java 单例模式

    5种方式实现 Java 单例模式单例模式(SingletonPattern)是Java中最简单的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式,可以直接访问,不需要实例化该类的对象。是否多线程安全:是是否懒加载:否正如名字含义,饿汉需要直接创建实例。缺点:类加载就初始化,浪费内存优点:没有加锁,执行效率高。还是线程安全的实例。懒汉单例,在类初始化不会创建实例,只有被调用时

    2022年8月11日
    12
  • 密宗经典是佛说的吗_华为微信语音加密怎么试听

    密宗经典是佛说的吗_华为微信语音加密怎么试听什么?佛经都能用来加密了?自上次的社会主义核心价值观加密之后,我已经见怪不怪了。题目:夜哆悉諳多苦奢陀奢諦冥神哆盧穆皤三侄三即諸諳即冥迦冥隸數顛耶迦奢若吉怯陀諳怖奢智侄諸若奢數菩奢集遠俱老竟寫明奢若梵等盧皤豆蒙密離怯婆皤礙他哆提哆多缽以南哆心曰姪罰蒙呐神。舍切真怯勝呐得俱沙罰娑是怯遠得呐數罰輸哆遠薩得槃漫夢盧皤亦醯呐娑皤瑟輸諳尼摩罰薩冥大倒參夢侄阿心罰等奢大度地冥殿皤沙蘇輸奢恐豆侄得罰提哆伽諳沙楞缽三死怯摩大蘇者數一遮解析:这题是攻防世界中的一道题目,这一段文字是佛经,按..

    2025年8月14日
    6
  • pycharm terminal 进入虚拟环境_pycharm failed to create virtual

    pycharm terminal 进入虚拟环境_pycharm failed to create virtualPycharmterminal激活虚拟环境,首先需要保证系统完成了conda的安装,并在Powershell中完成虚拟环境的创建(操作创建的虚拟环境名称为deep_pool,这个虚拟环境在接下来的操作中会被提及到)。如果不会创建虚拟环境,可以参考下面这个流程:Ubuntu20.4安装Anaconda以及过程中遇到的问题(已解决)_qq_53258482的博客-CSDN博客在虚拟环境创建完成后,在powershell中输入命令Set-ExecutionPolicy-ScopeCurrentUse

    2022年8月25日
    7
  • 排序二叉树的建立与中序遍历

    排序二叉树的建立与中序遍历树结构练习——排序二叉树的中序遍历TimeLimit:1000msMemorylimit:65536K有疑问?点这里^_^题目描述在树结构中,有一种特殊的二叉树叫做排序二叉树,直观的理解就是——(1).每个节点中包含有一个关键值(2).任意一个节点的左子树(如果存在的话)的关键值小于该节点的关键值(3).任意一个节点的右子树(如果存在的话)的关键值大于该节点的关键值。现

    2022年7月25日
    9

发表回复

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

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