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


相关推荐

  • [iOS]各种定时器–最全的定时器使用

    [iOS]各种定时器–最全的定时器使用

    2022年3月4日
    61
  • 弗洛伊德算法—–最短路径算法(一)

    弗洛伊德算法—–最短路径算法(一)学习此算法的原因:昨天下午遛弯的时候,碰到闺蜜正在看算法,突然问我会不会弗洛伊德算法?我就顺道答应,然后用了半个小时的时间,学习了此算法,并用5分钟讲解给她听,在此也分享给各位需要的朋友,让你们在最短的时间内,透彻的掌握该算法。RobertW.Floyd(罗伯特弗洛伊德)1962年在“CommunicationoftheACM”上发表了该算法,同年StephenWarsha…

    2022年6月4日
    385
  • XGBoost的基本原理

    XGBoost的基本原理XGBoost原理与实践

    2022年5月30日
    37
  • 使用X-Sendfile下载文件

    使用X-Sendfile下载文件X-Sendfile是一种将文件下载请求由后端应用转交给前端web服务器处理的机制,它可以消除后端程序既要读文件又要处理发送的压力,从而显著提高服务器效率,特别是处理大文件下载的情形下!X-Sendfile通过HTTPheader来实现:在X-Sendfile头中指定一个文件的地址来通告前webserver。不过,在默认情况下它是被大多数web服务器禁用的。而不同的…

    2022年6月5日
    34
  • python rarfile不支持中文路径_python使用zipfile解压文件中文乱码问题

    python rarfile不支持中文路径_python使用zipfile解压文件中文乱码问题中文在编程中真实后娘养的,各种坑爹,python3下中文乱码这个问题抓破了头皮,头疼。看了alex的文章,才有种恍然大悟的感觉(链接在底部)。一句话,就是转换成unicode,压缩前是什么编码,使用什么编码encode再decode回来先看测试代码:#-*-coding:utf-8-*-importzipfile#默认模式r,读azip=zipfile.ZipFile(“/Users…

    2025年8月22日
    5
  • Telerik RadControls for ASP.NET AJAX

    Telerik RadControls for ASP.NET AJAXRadCalendar集成的日期拾取器控件-RadCalendar提供了一个综合的DatePicker控件,此控件集成了Calendar,DateInput,和PopupButton控件。这使程序员能够快速地位web应用程序实施最常用的日期选择界面。客户端模式,服务器(AutoPostBack)模式-RadCalendar对AJAX提供了内建的支持,可确保整个S

    2022年7月24日
    9

发表回复

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

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