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

来源：互联网发布：java fork join 编辑：程序博客网时间：2024/06/10 00:54

1.先写一个和

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

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

#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;}

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

//建立一個可存取到該file的urlfunction 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);    }});

阅读全文

1 0