JavaScriptで更新せずにファイルをアップロードする方法の紹介

この記事では、ページを更新せずにJavaScriptでファイルをアップロードする方法を主に紹介しており、js+cssコードを使用して操作プロセスを詳しく紹介していますので、必要な友達は参照してください

jsを使用して更新せずに解決策を提供します。ファイルをアップロードするときのページ

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

このような効果を実現します:

HTML+CSS を使用して図のようにレイアウトを実装します。ボーダー幅: 5 ピクセル、グリッド サイズは 50 ピクセル * 50 ピクセル、ホバー時にボーダー赤に変わる場合は、セマンティクスを考慮する必要があります。

以上がJavaScriptで更新せずにファイルをアップロードする方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。