Maison  >  Article  >  interface Web  >  Le fichier de téléchargement JS n'actualise pas la page actuelle

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

php中世界最好的语言
php中世界最好的语言original
2018-04-19 10:03:351744parcourir

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

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("上传完毕!")
 })
}

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn