html5上传图片立即看到效果和图片替换

ゝ一世哀愁。 2022-06-13 12:48 109阅读 0赞

1.先写一个和

<img id="headImg" src="../img/assets/Oval 2.png"/>
    <input type="file" id="fileInput" class="fileInput img-circle" />

2.通过Css,控制这两个元素的位置，使他们大小相同，位置相同，达到重合的状态。读者可以更加自己的需要调整位置。  
![这里写图片描述][SouthEast]

#headImg{ width: 160px; height: 160px; margin-top: 72px; margin-left: 510px; border-radius: 50%; }
    #fileInput{ float: left; width: 160px; height: 160px; opacity: 0.0; background: black; cursor: pointer; margin-top: -160px; margin-left: 510px; }

![这里写图片描述][SouthEast 1]  
3.用js获取file的url，再赋值个img的src,就能达到立即显示的效果。

//建立一個可存取到該file的url
    function getObjectURL(file) { 
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    //用户的头像立即查看
    $("#fileInput").change(function() { 
        var objUrl = getObjectURL(this.files[0]);
        if (objUrl) {
            $("#headImg").attr("src", objUrl);
        }
    });

[SouthEast]: /images/20220613/c62c0ad79c8a41958a8f4d1a40964418.png
[SouthEast 1]: /images/20220613/a9e99e7803e842adbfe245d1740d3eab.png

发表评论取消回复

表情：

评论列表（有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读

相关用Html和js上传图片

以下是使用HTML和JavaScript上传图片的示例代码： <!DOCTYPE html> <html> <head> <title

灰太狼/ 2024年03月25日 07:37/ 0 赞/ 19 阅读

相关 HTML 各平台上传图片

[https://github.com/tx1721110240/UploadImg][https_github.com_tx1721110240_UploadImg] 苹果

柔光的暖阳◎/ 2022年12月23日 01:00/ 0 赞/ 207 阅读

相关 Spring 使用七牛云存储上传图片以及html5图片压缩上传

需求：最近在做项目的时候采用了多模块的方案前台是一个系统后台是另一个系统在做图片上传的时候有个问题如果想之前那样前台系统的图片保存的自己的web应用目录下

妖狐艹你老母/ 2022年10月01日 01:51/ 0 赞/ 270 阅读

相关 js实现上传图片立即回显

<script type="text/javascript"> //门头照片 function newFile() { var windowURL = window.U

女爷i/ 2022年09月30日 10:59/ 0 赞/ 238 阅读

相关学习笔记——SpringBoot上传图片，无法立即访问

> 在写图片上传接口时，图片上传成功，但是需要重启服务才能将已经上传的图片访问。 > > 解决方法：根据网上大神的说法，需要重写WebMvcConfigurer接口的addR

傷城~/ 2022年09月12日 15:43/ 0 赞/ 20 阅读

相关 html5压缩图片并上传

手机端图片有很大的，上传的时候很慢，这时候就要压缩一下了，有一个开源的js可以压缩图片的大小，开源地址如下：[https://github.com/think2011/loca

阳光穿透心脏的1/2处/ 2022年08月04日 12:59/ 0 赞/ 274 阅读

相关 html5上传图片立即看到效果和图片替换

1.先写一个和 <img id="headImg" src="../img/assets/Oval 2.png"/> <input type="file" i

ゝ一世哀愁。/ 2022年06月13日 12:48/ 0 赞/ 110 阅读

相关 html上传图片后，在页面显示上传的图片

html上传图片后，在页面显示上传的图片 1、html <form class="container" enctype="multipart/form-data"

爱被打了一巴掌/ 2022年06月04日 02:42/ 0 赞/ 322 阅读

相关 HTML5+canvas实现图片的压缩上传

1.图片上传输入框 <input type="file" name="" class="fileUpload" accept="image/" capture="ca

╰+攻爆jí腚メ/ 2022年05月24日 10:24/ 0 赞/ 257 阅读

相关关于HTML中上传图片

[关于HTML中上传图片][HTML] 值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,meth

女爷i/ 2022年05月06日 13:46/ 0 赞/ 260 阅读