javascript - 以下のコードをjqueryとして記述する方法は？

Question

以下のコードをjqueryとして記述するにはどうすればよいですか：

var imagefile = document.getElementsByClassName("fileImage");
var filename = imagefile.files[0];

以下でこれを試みましたが、ファイル入力のクラスが「fileImage」であるとすでに述べているにもかかわらず、定義されていないと表示されます。

var filename = $('.fileImage').files[0];

Answer 1

imagefile.files[0]それ以来、直接行うことはできません

document.getElementsByClassName("fileImage")
//and
$('.fileImage')

アイテムの「配列のような」リストを返します。（私の知る限り、getElementsBy*関数は を除き、getElementsByIdを返しますNodeList）

を取得する前に、最初にそれらを反復処理する必要がありますfiles[0]。

純粋な JS アプローチの場合:

for(var i=0; i < imagefile.length;i++){
    var imgfile = imagefile[i];

    //now imgfile is the DOM element itself
    imgfile.files[0];
}

jQueryの場合、チェーンします.each()

$('.fileImage').each(function(){

   //"this" in here is the DOM element

   this.files[0];

})

Answer 2

$() 関数によって返される jQuery オブジェクトには .files プロパティがありません。このプロパティは DOM 要素に属します。これを試して：

var filename = $('.fileImage')[0].files[0];

セレクターに一致する要素がない場合でもエラーが発生します。それ以外の場合は、jQuery オブジェクトで角かっこ配列構文を使用して、最初に一致する要素への参照を取得します。

セレクターに一致する要素があるかどうかをテストする場合は、jQuery オブジェクトの .length プロパティを使用します。

var $files = $('.fileImage'),
    filename;
if ($files.length > 0) {
   filename = $files[0].files[0];
   // do something with filename...
}

Answer 3

.files[]jQueryの一部ではないためです。