本文介绍如何利用 JavaScript 的 FormData 对象与 fetch API 实现文件无刷新上传，避免页面重载。同时结合 HTML 与 CSS 演示如何构建具有悬停变色效果的语义化表格布局，通过 border 属性控制边框样式与交互反馈，提供完整的代码示例与实现细节。
JavaScript 无刷新文件上传实现
本文介绍一种使用 JavaScript 实现文件上传时不刷新页面的技术方案。
上传逻辑代码示例
<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("上传完毕！")
})
}CSS 表格布局与交互效果
具体实现效果如下所示：
利用 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>以上即为无刷新上传文件的全部内容，感谢大家的支持。