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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 开源网管软件_网关开发

    开源网管软件_网关开发让你不差钱的9款开源网管工具(组图)http://network.51cto.com/art/200906/129490.htm 转载于:https://blog.51cto.com/zgxworks/167764

  • mybatis-log plugiin激活码(JetBrains全家桶)

    (mybatis-log plugiin激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1STL…

  • 502 bad gateway

    502 bad gateway聚石塔服务器 后台订单量比较大 搜索订单和导出订单 大概10s左右 就挂了 502badgatewayphp代码中加上set_time_limit(0);没有作用。配置中下面这个调大点就可以了 之前是10s 改成300s300s超过10s的就不502了

  • nginx location 匹配_nginx的location例子

    nginx location 匹配_nginx的location例子nginx执行请求的工作原理之location匹配详解

  • Hook技术【移动端&&PC端详解】「建议收藏」

    Hook技术【移动端&&PC端详解】「建议收藏」最近面试说到了这个hook技术,其实就是钩子函数,但是具体如何应用需要一探究竟,私下总结一下。文章目录移动端的hook技术应用1.whatisHook技术(移动端)2.Hook技术实现的步骤3.在移动开发中的应用:3.1使用hook技术实现免注册式跳转Windows端应用1.whatishook(钩子)2.Hook分类3.Hook工作原理Hook简介微软的MSDN中,…

  • myeclipse jdbc连接mysql数据库_怎样把navicat连接到eclipse

    myeclipse jdbc连接mysql数据库_怎样把navicat连接到eclipse解决Eclipse通过JDBC连接MySQL数据库遇到的问题。包括EstablishingSSLconnectionwithoutserver’sidentityverificationis…警告和Theservertimezonevalueisunrecognized警告

发表回复

您的电子邮箱地址不会被公开。

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