JavaScript 関数を使用してファイルをアップロードおよびダウンロードする

JavaScript 関数を使用してファイルのアップロードとダウンロードを実装する

インターネットの発展と普及に伴い、ファイルのアップロードとダウンロードは Web アプリケーションの一般的な機能の 1 つになりました。 。この記事では、JavaScript 関数を使用してファイルのアップロードおよびダウンロード機能を実装する方法と、具体的なコード例を紹介します。

1. ファイル アップロード

ファイル アップロードとは、Web ページを通じてローカル ファイルをサーバーにアップロードすることを指します。ファイルの選択とアップロードを処理するためのファイル API が HTML5 で提供されています。 File API の FileReader オブジェクトを使用して、ファイルのコンテンツを読み取り、XMLHttpRequest オブジェクトを通じてファイルをサーバーに送信できます。

次は、ファイルのアップロードを実装するための JavaScript 関数のコード例です。

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  
  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert('文件上传成功');
    }
  };
  xhr.send(formData);
}

上記のコードでは、最初にファイル選択ボックスの DOM オブジェクトを取得し、次に選択したファイルを削除します。次に、FormData オブジェクトを作成し、選択したファイルを FormData に追加します。次に、XMLHttpRequest オブジェクトを作成し、open() メソッドを使用してアップロード URL とリクエスト メソッドを指定します。 onreadystatechange イベントを通じて XMLHttpRequest のステータスの変化を監視します。ステータスが 4 でステータス コードが 200 の場合は、ファイルのアップロードが成功したことを意味します。最後に、send() メソッドを呼び出して FormData をサーバーに送信します。

2. ファイルのダウンロード

ファイルのダウンロードとは、サーバーからローカルにファイルをダウンロードすることを指します。 JavaScript では、ファイルのダウンロード リンクを含む <a></a> 要素を作成し、クリックをシミュレートすることで、ファイルをダウンロードできます。

次は、ファイルのダウンロードを実装するための JavaScript 関数コードの例です:

function downloadFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/download', true);
  xhr.responseType = 'blob';
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var blob = xhr.response;
      var link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'file.txt';
      link.click();
    }
  };
  xhr.send();
}

上記のコードでは、まず XMLHttpRequest オブジェクトを作成し、open() メソッドを使用してダウンロード URL を指定します。 GET のリクエスト メソッド。ファイルをバイナリ データとして受信するには、responseType を「blob」に設定します。 onreadystatechange イベントを通じて XMLHttpRequest のステータスの変化を監視します。ステータスが 4 でステータス コードが 200 の場合は、ファイルのダウンロードが成功したことを意味します。次に、<a></a> 要素を作成して、応答 BLOB オブジェクトを URL に変換し、その URL を <a></a> 要素の href 属性に割り当てます。ファイル名を「downloaded.txt」に設定します。最後に、<a></a> 要素のクリックをシミュレートして、ファイルのダウンロードをトリガーします。

要約すると、JavaScript 関数を使用することで、ファイルのアップロードおよびダウンロード機能を簡単に実装できます。 File API と XMLHttpRequest オブジェクトを通じて、ファイルの読み取りと送信を行うことができます。 <a></a> 要素を作成し、クリックをシミュレートすることで、ファイルをダウンロードできます。実際のアプリケーションでは、特定のニーズに応じてこれらの機能を拡張および最適化できます。

以上がJavaScript 関数を使用してファイルをアップロードおよびダウンロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。