欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript实现上传图片并展示

程序员文章站 2022-05-18 21:19:28
我们也都知道上传图片的样子是这样的(选择前)是这样的(选择后)。 先在HTML设置图片上传 然后编辑css样式 最后设置js上传图片后的变化 最终呈现出来的结果如下:选择前选择后。 本文属于简单的小白文,只是讲述知识点,如有帮助,切勿复制,请自行修改使用 ......

我们也都知道上传图片的样子是这样的(选择前)javascript实现上传图片并展示是这样的(选择后)javascript实现上传图片并展示

 

先在html设置图片上传

<form action="" method="">
    <input type="file" id="file">
    <label for="file">上传图片</label>
    <img src="" alt="" id="myimg"/>
</form>

然后编辑css样式

#file{
    display: none;
}
#file + label{
    display: inline-block;
    width: 100px;
    height: 30px;
    background-color: rgb(90, 152, 222);
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
}
img{
    display: none;
    width: 200px;
    height: 200px;
}

最后设置js上传图片后的变化

var myimg = document.getelementbyid('myimg');
var file = document.getelementbyid('file');
file.onchange = function(){
    var url;
    var agent = navigator.useragent;   //检测浏览器版本
    if (agent.indexof("msie")>=1) {
      url = file.value;
    } else if(agent.indexof("firefox")>0) {
      url = window.url.createobjecturl(file.files.item(0));
    } else if(agent.indexof("chrome")>0) {
      url = window.url.createobjecturl(file.files.item(0));
    }
    myimg.src = url
    myimg.style.display = "block";
}

最终呈现出来的结果如下:选择前javascript实现上传图片并展示选择后javascript实现上传图片并展示

本文属于简单的小白文,只是讲述知识点,如有帮助,切勿复制,请自行修改使用