2

私はjqueryを使用してhtml5ファイルのアップロードでいくつかのテストを行っていましたが、（少なくとも私にとっては）奇妙なことに遭遇しました。ファイルコントロールで選択されたファイルのリストを取得しようとしました：

<html><head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>
    <input type="file" multiple="multiple" id="inputFile" name="inputFile">
    <button onclick="buttonClicked()" type="button">upload</button>
<script type="text/javascript">//<![CDATA[ 
function buttonClicked() {
    console.log($("#inputFile").val()); // depending on the browser, gives either the file name, either the full path, but only for the first file
    console.log($("#inputFile").files); // gives undefined
    console.log($("#inputFile").attr("files")); // gives undefined
    console.log($("#inputFile").get()); // according to the jquery documentation, give the dom element...
    console.log($("#inputFile").get().files); // ...but strangely, files is undefined
    console.log($("#inputFile")[0].files); // on the other hand, this gives me the list of files
}
//]]>;  
</script>
</body></html>

ですから、最初は$（ "＃inputFile"）。val（）が私にそれを最小限に抑えてくれると期待していましたが、そうではありませんでした。そこで、input.filesのバリエーションを試しましたが、jqueryオブジェクトに適合していないように見えたため、実際には機能することを期待していませんでした（ただし、わかりません）。そこで、jqueryから基になるdom要素を取得して、ファイルアイテムにアクセスしようとしました。そして、それも定義されていないので、それは奇妙になるところです。一方、$（ "＃inputFile"）[0] .filesは、期待される結果をもたらします。

[編集]そして、よくあることですが、その質問を入力しているときに、自分で解決策を見つけました。とにかくここに置いておきますので、それに苦労している人は誰でもそれを解決するチャンスがあります。それは基本的にRRTFMに行きます、本当にRTFMのように：

一致したすべてのDOMノードは、この呼び出しによって返され、標準の配列に含まれます

つまり、要素が1つしかない場合でもです。したがって、呼び出し：

console.log($("#inputFile").get());

files1つの要素を持つ配列を返していましたが、もちろん配列にはプロパティがありません。それはすべきだった：

console.log($("#inputFile").get(0)); 
console.log($("#inputFile").get()[0]); // or this one, but that's a bit silly
4

1 に答える 1

3

問題は、の代わりに使用.get()する配列を返す（.get(0)最初の要素を提供する）という事実に加えてです。.attr().prop()

必要に応じelem.filesて、jQuery でアクセスする方法は$(elem).prop('files').

それを使用する場合、通常はやなどのプロパティに必要ではない.attr()呼び出しに対応します。jQuery は、たとえば などのプロパティに自動的に切り替わることがありますが、もちろんすべてのプロパティをカバーできるわけではありません。.getAttribute()filescheckedchecked

したがって、最終的に使いたいのは$('#inputFile').prop('files')or$("#inputFile").get(0).filesです。ただし、セレクターが何も一致しなかった場合、後者はエラーをスローします。

于 2012-04-24T10:45:05.030 に答える