質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1445閲覧

getElementByIdで取得したエレメントのプロパティ

pegy

総合スコア243

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/10/07 10:31

下記のように、.filesで最終的にlengthを取得しようとしたところ
(1)では取得でき(2)では取得できず0が返されます。
なぜ(2)では取得できないのか、(2)で取得している0(ひいてはFileListオブジェクト)は一体何者なのでしょうか。
基礎的な事で申し訳ございませんが、よろしくお願い申し上げます。

Javascript

11) 2<input type="file" multiple id="hoge"> 3<script type="text/javascript"> 4var element=document.getElementById('hoge'); 5$(function(){ 6$('#hoge').on('change',function(){ 7console.log(element.files.length); 8}) 9}); 10</script> 11 122) 13<input type="file" multiple id="hoge"> 14<script type="text/javascript"> 15var element=document.getElementById('hoge').files; 16$(function(){ 17$('#hoge').on('change',function(){ 18console.log(element.length); 19}) 20}); 21</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

(2)で取得されているFileListオブジェクトは、ページの読み込み時(ファイルが指定されていない状態の時)に取得されたinputのファイル一覧です。
この値は、inputにファイルを指定して、document.getElementById('hoge').filesの状態が変わってもその中身が取得時点から変更されることはありません。
下記のように確認すると、別の値となっていることがわかるのではないかと思います。
記載頂いたコードはjQueryに依存しているようでしたので、一部内容を変えている箇所があります。

html

1<input type="file" multiple id="hoge"> 2<script type="text/javascript"> 3 var element=document.getElementById('hoge').files; 4 console.log(element); 5 6 window.onload=function(){ 7 document.getElementById('hoge').onchange=function(){ 8 var files = document.getElementById('hoge').files; 9 console.log(element); 10 console.log(element.length); 11 console.log(files); 12 console.log(files.length); 13 console.log(files == element); 14 console.log(files === element); 15 } 16 }; 17</script>

投稿2017/10/07 10:56

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問