Le fichier de téléchargement JS n'actualise pas la page actuelle

Cette fois, je vais vous apporter les précautions pour le téléchargement de fichiers JS qui n'actualisent pas la page actuelle et le téléchargement de fichiers JS qui n'actualisent pas la page actuelle. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Utilisez js pour fournir une solution sans actualiser la page lors du téléchargement de fichiers

<input id="upload"type="file"/>
<button id="upload-btn">upload</button>
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("上传完毕！")
 })
}

Pour obtenir un tel effet :

Utilisez HTML+CSS pour implémenter la mise en page comme indiqué, border-width:5px, la taille de la grille est de 50px*50px, au survol, la bordure devient rouge, vous devez considérer la sémantique .

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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

JS implémente un fondu d'entrée et de sortie uniforme des images

Comment convertir des nombres et chaînes en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!