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

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

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>

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!