这篇文章主要介绍了javascript上传文件时不用刷新页面方法,用js+css代码详细介绍了操作过程,需要的朋友可以参考下
用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>
以上就是javascript实现不刷新上传文件的方法介绍的详细内容。