jqueryはアップロードされたファイルの詳細を取得します

今回は、アップロードされたファイルの詳細情報を取得するための 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. ファイルを選択後、「アップロードしたファイルの詳細情報を表示」ボタンをクリックすると、ファイルの詳細情報が表示されます。

複数のファイルを同時にアップロードするには、ファイルアップロードタグに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 サイトの他の関連記事に注目してください。

推奨読書:

nodeはログイン時に画像検証コード機能を実装します

vue親コンポーネントから親コンポーネントに値を渡す手順の詳細な説明

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