原生JS獲取input上傳的圖片返回的地址

1. HTML文件

<li>
    <label for="uploadFile" class="upload-file">點擊上傳</label>
    <!-- 在CSS中將input隱藏，UI效果用label展示 -->
    <input type="file" name="upload_file" id="uploadFile" οnchange="uploadImg()" />
    <br>
    <!-- 沒有上傳的時候不顯示 ,上傳以後添加src-->
    <img id="showUploadFile" src="" class="picture" style="display:none;" >
</li>

2. 點擊上傳後，讀取上傳的文件

// 點擊上傳圖片
function uploadImg(){
    let file = document.getElementById('uploadFile').files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(result){
        let showUploadFile = document.getElementById('showUploadFile');
        showUploadFile.src = result.target.result;
        showUploadFile.style.display ='inline-block'
    }
}

3. 樣式文件CSS

.upload-file{
    width:80px;
    height:30px;
    line-height: 30px;
    text-align: center;
    margin:0;
    background-color: #000;
    color:#fff;
    border-radius: 3px;
    cursor: pointer;
}

.picture{
    width: 58px;
    height: 58px;
    border: 1px solid #ccc;
    margin-left:42px;
    margin-top:10px;
}

input[type=file] {
    display: none !important;
}