jqueryを使用してアップロードされたファイル名、タイプ、サイズを取得する方法

今回はjqueryを使ってアップロードされたファイルの名前、種類、サイズを取得する方法を紹介します。ケース、見てみましょう。 通常、ユーザーが タグを通じてファイルをアップロードすると、アップロードされたファイルの名前が表示されます。 HTML5 ファイル API は、クライアント側のコンピューター上のファイルにアクセスし、これらのファイルに対する操作をより適切に実行するための安全な方法を提供します。

ファイル API をサポートするブラウザには、IE10 以降、Firefox4 以降、Safari5.0.5 以降、Opera11.1 以降、Chrome が含まれます。

ファイル API は、フォームのファイル入力フィールドに基づいてファイル情報に直接アクセスするためのインターフェイスをいくつか追加します。 HTML5 では、ファイル入力要素の DOM にファイル コレクションが追加されます。ファイル入力フィールドを通じて 1 つ以上のファイルが選択されると、ファイル コレクションには一連の File オブジェクトが含まれ、各 File オブジェクトは 1 つのファイルに対応します。各ファイルには、次の読み取り専用属性があります:

name: ローカル
• ファイル システム

  内のファイル名。

size: ファイル内のバイト数。
type: ファイルの MIME タイプ。
lastModifiedDate: ファイルが最後に変更された時刻。
このファイルインターフェイスを通じて、jqueryでアップロードされたファイルの名前、タイプ、サイズを取得できます。以下のデモでその効果を体験してください。

1.「ファイルを選択」ボタンを使用して、アップロードするファイルを選択します。複数のファイルを選択できます。

2. ファイルを選択後、「アップロードしたファイルの詳細情報を表示」ボタンをクリックすると、ファイルの詳細情報が表示されます。

複数のファイルを同時にアップロードするには、

File Upload

タグに multiple 属性を追加する必要があります。上記のデモの HTML 構造は次のとおりです。

<input id="fUpload" multiple type="file" /><br />
<ul id="ulList">
</ul>
<input id="btnShow" type="button" value="显示上传文件的详细详细" />

jquery コードでは、まず選択されたファイルの数が検出され、次にループを通じて各ファイルの詳細情報が取得されます。完全な jquery コードは次のとおりです:

$("#btnShow").on('click', function () {
  $("#ulList").empty();
  var fp = $("#fUpload");
  var lg = fp[0].files.length; // get length
  var items = fp[0].files;
  var fragment = "";
   
  if (lg > 0) {
    for (var i = 0; i < lg; i++) {
      var fileName = items[i].name; // get file name
      var fileSize = items[i].size; // get file size 
      var fileType = items[i].type; // get file type
 
      // append li to UL tag to display File info
      fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
    }
 
    $("#ulList").append(fragment);
  }
});

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue-cli プロジェクトでブートストラップを使用する方法

JS を使用してユーザーの都市と地理的位置を取得する方法

以上がjqueryを使用してアップロードされたファイル名、タイプ、サイズを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。