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)
上一篇 2021年11月10日 上午8:00
下一篇 2021年11月10日 上午9:00


相关推荐

  • Chain of Responsibility职责链[通俗易懂]

    Chain of Responsibility职责链[通俗易懂]职责链 Chain of Responsibility动机模式定义实例结构要点总结笔记动机在软件构建过程中,一个请求可能被多个对象处理.但是每个请求在运行时只能有一个请求者.如果显示指定.将必不可少地带来请求发送者与接收者地紧耦合如何使请求地发送者不需要指定具体地接收者?让请求地接收者自己在运行时决定来处理请求,从而使两者解耦模式定义使多个对象都有机会处理请求 从而避免请求地发送者和接收者之间地耦合关系.将这些对象形成一条链.并沿着这条链传递请求.直到有一个对象处理它为止实例#include&

    2022年8月9日
    6
  • 绘制火山图&热图

    绘制火山图&热图在上一篇文章中 我们已经对基因进行了差异分析 接下来我们根据结果中的 FDR 值和 FC 值筛选出上调基因和下调基因 并绘制成火山图与热图

    2026年3月26日
    3
  • 使用mshta.exe绕过应用程序白名单

    使用mshta.exe绕过应用程序白名单今天,我们将学习有关HTA攻击的不同方法。HTA是有用且重要的攻击,因为它可以绕过应用程序白名单。在上一篇文章中,我们讨论了“WindowsApplocker策略-入门指南”,因为它们定义了应用

    2022年7月1日
    22
  • 京东云 服务器_京东云服务器免费体验

    京东云 服务器_京东云服务器免费体验哈哈哈~又来“打广告”了~~~一开始用着华为云服务不错,只不过因为自己一时粗心忘了密码,找回密码又比较麻烦,所以从网上搜免费的云服务器。果然发现了京东云……(虽然是第一次见),不过确实方便好用。好处如下:*实名认证方式就比较简单,不需要拿着身份证照来照去了,审核基本是秒过*功能操作比较简单*免费半年使用权(主要是这个原因)注册账号领取免费套餐注册账号:1、进入官网,直接

    2022年10月14日
    3
  • js 获取当前时间 年月日

    js 获取当前时间 年月日

    2022年2月23日
    62
  • 串口服务器调试助手使用教程,如何配置串口服务器及串口调试的六个技巧

    串口服务器调试助手使用教程,如何配置串口服务器及串口调试的六个技巧串口服务器如何配置,很多用户都不清楚。今天,本文总结和阐述了如何配置串口服务器和串口调试的六个技巧:1.如何设置串口服务器的串口属性,比如波特率参数和数值?点击屏幕上的“设备”单元;手动键入“程序设置”;手动选择“程序”,最后手动输入“串口参数”。2.串口服务器怎么配置?首先要熟悉自己的操作环境和应用配置参数(熟悉各个串口的工作模式,熟悉主要参数中包含的网络参数,设备本身的信息内容,打印服务等相关…

    2022年6月3日
    55

发表回复

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

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