jqueryを使用してアップロードされたファイルの特定のコンテンツを取得する

今回は、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 サイトの他の関連記事に注目してください。

推奨読書:

vue プロジェクト API インターフェイスを管理する方法

ログイン時に画像確認コードを作成するノード

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