FileUpLoadコントロールでファイルをアップロードする方法

2年 ago
夏樹, 風
1 minute

FileUpLoadコントロールを使用してファイルをアップロードするには、以下の手順に従ってください。

  1. それは良くできる
<input type="file" id="uploadFile" name="uploadFile">
  1. JavaScript を使用して FileUpload コントロールのインスタンスを取得し、ファイルのアップロード処理を処理するイベント リスナを追加します。
document.getElementById("uploadFile").addEventListener("change", handleFileUpload);
  1. ユーザーがアップロードするファイルを決定したら呼び出される、ファイルアップロードを処理する関数を作成します。
function handleFileUpload(event) {
  const file = event.target.files[0];
  
  // 在这里执行文件上传的操作，可以使用AJAX或其他方式将文件发送到服务器
}
  1. handleFileUploadでは、ファイルはAJAXまたはその他の方法でサーバーに送信できます。 AJAXを使用したファイルアップロードの例を次に示します。
function handleFileUpload(event) {
  const file = event.target.files[0];
  
  const formData = new FormData();
  formData.append("file", file);

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload", true);
  xhr.send(formData);
}

ユーザーがアップロードするファイルを選択すると、FileUpLoadコンポーネントがchangeイベントをトリガーし、handleFileUpload関数が呼び出され、ファイルアップロードの処理を行います。handleFileUpload関数内で、ファイルをサーバに送信する処理を実行できます。例えば、上記のサンプルのように、AJAXを使ってファイルをアップロードします。

bannerAds