Heim > Web-Frontend > js-Tutorial > Einführung in die Methode zum Hochladen von Dateien ohne Aktualisierung in JavaScript

Einführung in die Methode zum Hochladen von Dateien ohne Aktualisierung in JavaScript

巴扎黑
Freigeben: 2017-08-18 10:06:50
Original
1764 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zum Hochladen von Dateien mithilfe von JavaScript vorgestellt, ohne die Seite zu aktualisieren. Freunde, die ihn benötigen, können sich auf

Verwenden js zum Hochladen einer Lösung ohne Aktualisierung der Seite beim Bearbeiten einer Datei


 <input id="upload" type="file"/>
 <button id="upload-btn">upload</button>
 document.getElementById(&#39;upload-btn&#39;).onclick = function(){ 
  var oInput = document.getElementById(&#39;upload&#39;); 
  var file = oInput.files[0];  //选取文件
  var formData = new FormData(); //创建表单数据对象
  formData.append(&#39;file&#39;,file); //将文件添加到表单对象中
  fetch({       //传输
   url:&#39;./&#39;,
   mothod:&#39;POST&#39;,
   body:formData 
  }) 
  .then((d)=>{
  console.log(&#39;result is&#39;,d);
  alert("上传完毕!")
  })
 }
Nach dem Login kopieren

Erzielen Sie einen solchen Effekt:

Verwenden Sie HTML + CSS, um dies zu erreichen. Wie im Layout gezeigt, beträgt die Rahmenbreite 5 Pixel und die Rastergröße 50 Pixel * 50 Pixel. Beim Schweben wird der Rand rot, daher muss die Semantik berücksichtigt werden.

 


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

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Hochladen von Dateien ohne Aktualisierung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage