无刷新上传文件

Posted 2020-10-02

用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>