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


相关推荐

  • git 命令怎么删除远程分支文件_git删除远程仓库分支

    git 命令怎么删除远程分支文件_git删除远程仓库分支本地删除请看:git命令怎么删除本地分支查看所有分支查看项目的远程分支:gitbranch-r删除远程分支比如我们要删除远程分支origin/SLT_table_reportgitpushorigin-d分支名我们执行:gitpushorigin-dSLT_table_report删除成功注意这里不能写成origin/SLT_table_report,不然会报错:具体请参考【git删除远程分支报错error:unabletodelete‘

    2022年10月16日
    1
  • jq 取 scrollHeight值

    jq 取 scrollHeight值jq取scrollHeight,$(“#tendersList”).scrollHeight拿不到$(“#tendersList”)[0].scrollHeight//取值scrollHeight$scope.initScroll=function($last){ if($last){ console.log($(“#tendersList”).height()…

    2022年7月24日
    8
  • Git提交(PUSH)时记住密码 – 不用每次都输入密码

    Git提交(PUSH)时记住密码 – 不用每次都输入密码

    2022年2月8日
    40
  • 解决window10播放.avi格式视频黑屏,只有声音没有视频0xc00d5212错误

    解决window10播放.avi格式视频黑屏,只有声音没有视频0xc00d5212错误自己找的学习资源从百度网盘下载后,有些.avi视频黑屏,只有声音没有视频,尝试了两种办法:1.下载K-LiteCodecPack,但电脑自动拦截,不让安装,具体效果不详。2.下载格式工厂,亲测有效!!且操作简单步骤如下图所示:我转为的是MP4格式,点击MP4,然后添加文件添加好文件后,点确定但此时并没有真正的开始转换哦,必须按开始键才算开始。…

    2022年9月30日
    0
  • 人人网登录界面[通俗易懂]

    人人网登录界面[通俗易懂]<!DOCTYPEhtml><html> <head><metacharset="UTF-8"><title

    2022年8月2日
    5
  • 华为服务器装系统怎么选pxe,服务器设置pxe启动

    华为服务器装系统怎么选pxe,服务器设置pxe启动服务器设置pxe启动内容精选换一换全量复制会把源端服务器所有数据都复制到目的端,复制速度取决源端服务器出网带宽和目的端服务器入网带宽(两者取较小者)。开始服务器复制后,禁止重启源端及Agent,否则会导致迁移失败。已设置目的端,参考设置迁移目的端。当“迁移阶段”为时才可启动全量复制。或勾选待迁移的服务器,单击服务器名称/ID上方的“开始”,弹出“开始”窗口,单击“确定”,本节介绍在设置目的端时,…

    2022年6月16日
    29

发表回复

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

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