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

最終呈現出來的結果如下：選擇前選擇后。

本文屬於簡單的小白文，只是講述知識點，如有幫助，切勿復制，請自行修改使用