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


相关推荐

  • 将 VSCode 快捷键修改为 eclipse的快捷键[通俗易懂]

    将 VSCode 快捷键修改为 eclipse的快捷键[通俗易懂]文章目录1、VSCode中打开`命令面板`,如下图所示。2)在命令面板中输入`keyboard`3)打开`首选项:打开键盘快捷方式(JSON)`4)在`keybindings.json`中配置快捷键配置1(常用的快捷键)配置2(最全的快捷键)1、VSCode中打开命令面板,如下图所示。2)在命令面板中输入keyboard在命令面板中输入keyboard,然后在列表中选择首选项:打开键盘快捷方式(JSON):3)打开首选项:打开键盘快捷方式(JSON)点击

    2022年6月3日
    100
  • bs和cs开发架构的详细解析区别_BS与CS架构区别

    bs和cs开发架构的详细解析区别_BS与CS架构区别目前开发的基本架构。一、CS结构—-Client/Server1、开发者需要编写两个端点,一个是客户端程序,一个是服务端程序。举例:QQ、360等等。2、需要再客户机安装客户端的部分。3、弊端:客户端的维护比较麻烦,机器只要一重装,就需要重新安装该软件,同时升级也比较麻烦。后期有了一个解决方案:对于升级,可以通过网络升级的形式完成。4、好处:客户端的出现,可以

    2022年10月16日
    4
  • Xmind快捷键笔记

    Xmind快捷键笔记

    2022年6月5日
    27
  • StrictMode介绍[通俗易懂]

    StrictMode介绍[通俗易懂]第1页:  【IT168技术  】最新的Android平台中(Android2.3起),新增加了一个新的类,叫StrictMode(android.os.StrictMode)。这个类可以用来帮助开发者改进他们编写的应用,并且提供了各种的策略,这些策略能随时检查和报告开发者开发应用中存在的问题,比如可以监视那些本不应该在主线程中完成的工作或者其他的一些不规范和不好的代码。  Stri

    2022年5月1日
    66
  • 计算机系统新手入门,电脑初学者入门教程

    计算机系统新手入门,电脑初学者入门教程本篇主要从关机、任务管理器、电脑屏幕锁定这三个方面,帮助初次学习电脑的人尽快掌握一些基本操作,快一起来学习吧。工具/材料电脑(本篇以Windows7系统为例)电脑关机01方法一。首先,点击屏幕左下方的win(当点击时,会提示“开始”的字样)。02点击后,可以看见有关机选项,点击关机,后面出现几个选项,根据需要进行选择就可以。03方法二:使用快捷键。按下快捷键Alt+F4。(这里需要注意,是同时按…

    2022年6月15日
    53
  • 写出一个程序员框架_html收藏代码

    写出一个程序员框架_html收藏代码Python实战社群Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲扫码关注添加客服进Java社群▲作者丨cloudsky来源丨JAVA小咖秀https…

    2022年9月30日
    5

发表回复

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

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