用js給出一個上傳文件時不用刷新頁面的方案

 <input id="upload" type="file"/>
 <button id="upload-btn">upload</button>

    document.getElementById(‘upload-btn‘).onclick = function(){  
        var oInput = document.getElementById(‘upload‘);  
        var file = oInput.files[0];       //選取文件
        var formData = new FormData();   //創建表單數據對象
        formData.append(‘file‘,file);    //將文件添加到表單對象中
        fetch({                          //傳輸
            url:‘./‘,
            mothod:‘POST‘,
            body:formData 
        }) 
        .then((d)=>{
        console.log(‘result is‘,d);
        alert("上傳完畢！")
        })
    }

實現這麽一個效果：

使用HTML+CSS實現如圖布局，border-width:5px，格子大小是50px*50px，hover時，邊框變成紅色，需要考慮語義化。

        table{
            border-collapse:collapse;   /* 為表格設置合並邊框模型 */
            margin:50px;
            text-align:center;  /* 設置文字居中 */
        }  
        table tr{
            border:none;
        } 
        table.tab td{
            width:50px;
            height:50px;
            border:5px  inset blue;
        } 
        table.tab td:hover{
            border:5px solid red;
            cursor: pointer;
        }

        <table class="tab">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

無刷新上傳文件