JS upload file does not refresh the current page

This time I will bring you the precautions on how JS upload files do not refresh the current page and JS upload files do not refresh the current page. The following is a practical case, let’s take a look.

Use js to give a solution without refreshing the page when uploading files

2eed732a8643f81570eb2757cb89c834
0e5999c1a9f42bf9dc0af437dd98b40bupload65281c5ac262bf6d81768915a4a77ac0
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("上传完毕！")
 })
}

To achieve such an effect:

Use HTML CSS to implement the layout as shown, border-width:5px, the grid size is 50px*50px, when hovering, the border turns red, you need to consider semantic.

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;
 }
 <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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

js realizes the uniform fade-in and fade-out of pictures

How to realize the mutual conversion between numbers and strings in JS

The above is the detailed content of JS upload file does not refresh the current page. For more information, please follow other related articles on the PHP Chinese website!