Heim > Web-Frontend > js-Tutorial > Die JS-Upload-Datei aktualisiert die aktuelle Seite nicht

Die JS-Upload-Datei aktualisiert die aktuelle Seite nicht

php中世界最好的语言
Freigeben: 2018-04-19 10:03:35
Original
1857 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen mitteilen, dass das Hochladen von JS-Dateien die aktuelle Seite nicht aktualisiert und dass das Hochladen von JS-Dateien die aktuelle Seite nicht aktualisiert. Das Folgende ist ein praktischer Fall ein Blick.

Verwenden Sie js, um eine Lösung bereitzustellen, ohne die Seite beim Hochladen von Dateien zu aktualisieren

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

Um einen solchen Effekt zu erzielen:

Verwenden Sie HTML+CSS, um das Layout wie gezeigt zu implementieren, Rahmenbreite:5px, die Rastergröße beträgt 50px*50px, beim Schweben wird der Rand rot, Sie müssen Semantik berücksichtigen .

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>
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

JS implementiert ein einheitliches Ein- und Ausblenden von Bildern

So konvertieren Sie Zahlen und Zeichenfolgen in JS

Das obige ist der detaillierte Inhalt vonDie JS-Upload-Datei aktualisiert die aktuelle Seite nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Aktuelle Ausgaben
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage