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


相关推荐

  • SCSA考试大纲[通俗易懂]

    SCSA考试大纲[通俗易懂]认证考试形式和结构一、试卷满分及时间试卷满分为120分,考试时间为80分钟,80分通过二、考试形式在线考试三、答题方式闭卷四、试卷内容知识结构试题比例网络基础15%信息安全基础5%数据传输安全15%上网行为安全30%边界安全20%…

    2022年6月20日
    36
  • Sql server–事务

    Sql server–事务

    2021年9月8日
    59
  • Ubuntu 安装mysql和简单操作

    ubuntu上安装mysql非常简单只需要几条命令就可以完成。http://hovertree.com/menu/mysql/1. sudoapt-getinstallmysql-s

    2021年12月24日
    35
  • Python websocket_php需要编译吗

    Python websocket_php需要编译吗这里很坑爹………地址换了….网上到处都是旧的github地址….更郁闷的是旧地址的代码在centos等各个linux都能编译通过,但是到了mac就郁闷了,各种报错…..坑爹来的然后很多人说hs没在维护了,那是因为他们看到的是旧的git代码地址….囧…..搞死我了,我还真以为他不更新了,看到git项目,3年没更新了,心都凉了……各种找错误各种…

    2022年8月24日
    5
  • CAP 原理[通俗易懂]

    CAP 原理[通俗易懂]简单记录下分布式数据库的CAP原理

    2022年5月12日
    41
  • 详解stacking过程

    翻到之前自己写的这篇博客,感觉写的还是不够简洁明了,特地回来改一下,顺便文末附上Kaggle内相关操作的代码,希望能够帮助学习的同学能够瞬间理解stacking这个概念。stacking:stacking是一种分层模型集成框架。以两层为例,第一层由多个基学习器组成,其输入为原始训练集,第二层的模型则是以第一层基学习器的输出作为特征加入训练集进行再训练,从而得到完整的stacking模型。sta…

    2022年4月6日
    126

发表回复

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

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