【javascript学习指南】JavaScript上传文件时不用刷新页面方法总结（推荐）

【www.bbyears.com--js教程】

用js给出一个上传文件时不用刷新页面的方案

upload
document.getElementById("upload-btn").onclick =function(){
 varoInput = document.getElementById("upload");
 varfile = oInput.files[0]; //选取文件
 varformData =newFormData();//创建表单数据对象
 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:5pxinsetblue;
 }
 table.tab td:hover{
  border:5pxsolidred;
  cursor:pointer;
 }
 
 
  1
  2
  3
 
 
  4
  5
  6
 
 
  7
  8
  9
 
 

本文来源：http://www.bbyears.com/wangyezhizuo/135066.html