input type="file" multiple でuploadする度に変数をカウントアップさせる

Question

複数のファイルをアップロードすることを許可しているのですが、アップロードされている
ファイルをタイムリーにカウントしようとしております。
そこで、アップロードされる度にそのファイル個数（files.length)を変数に加算するために
file_length+=element.files.length;
としているのですが、NaNが返ってきてしまいます。
+=の加算代入演算子の使い方が誤っているのでしょうか？
よろしくお願いいたします。

<input type="file" id="files" style="display: none" value="2097152" name="file" multiple />
<script type="text/javascript">
			var element=document.getElementById('files');
			var file_length;
			$(function(){
				$('#files').on('change',function(){
					file_length+=element.files.length;
					console.log(file_length);
				})

			});
		</script>

[加筆]
ローカルスコープからグローバルスコープの変数に加算代入演算したいということになりますが、
そもそも不可能なのでしょうか？ スコープの問題もありますが、なぜNaNが返ってくるのかわかりません。。

Answer 1

変数宣言時にfile_lengthに値を代入していないからではないでしょうか?

var file_length = 0;とするべきです。

[加筆]に対し追記:

javascriptの場合、外側で宣言した変数は特に何も気にすることなくグローバル変数として使用できたはずです。

追記:

繰り返しになりますがpythonじゃあるまいし(pythonの場合はglobalの明示が必要)ローカルスコープでグローバル変数が使えないなんて事は無いですよ？

サンプル

もしずっと0なのでしたら、そもそもelement.files.lengthの値が0だったりしませんか?

ちなみに実行タイミング的にconsole.log(file_length);//ここのグローバル変数を加算していきたい！における出力は0が正しいです。

さらに追記:

ローカルで変化した変数をグローバルで参照したい

とのことですが、今回の処理の場合は全部グローバル変数で管理する方がいいと思いますよ？

関数内でvarを使ってローカル変数を宣言された場合、関数を抜けた段階で値がリセットされてしまいますから、そもそもローカル変数に値を保存するということ自体がまず不可能です。

var glbl;

var lcl = function(n){
  var val = 0;
　// ↑ここで0を代入してしまっている時点で、、あっ、ふ〜ん(察し)という感じですが(^ ^;
　// しかし入れないわけには行きません。
  val += n;
  console.log(val);

  glbl = val; // 質問者様が行いたいと考えておられること
}

lcl(10); // 期待する値 : 10 実際 : 10
console.log(glbl); // 期待する値 : 10 実際 : 10
lcl(10); // 期待する値 : 20 実際 : 10
console.log(glbl); // 期待する値 : 20 実際 : 10
lcl(10); // 期待する値 : 30 実際 : 10
console.log(glbl); // 期待する値 : 30 実際 : 10

ですから関数内でもグローバル変数のみを用いる、という方法のままでいいと思います。

その直後(グローバル変数に保存した直後)にelement.files.lengthで得られた値を使って別な処理をしたいわけでも無い限り、使い捨てのローカル変数を用意するだけ無駄です。

どうしてもスコープを意識したいのであればオブジェクト指向の考え方を使い、インスタンスのプロパティに保存すれば意図した動作となるとは思いますが、今回の動作でそのような大掛かりなものは不要だと思われます。

<button>btn</button> step : <input type="number" value="10" />
<script>
$(function(){
  var glbl = 5;

  var lcl = new (function(){
    this.step = 10;
    this.add = function(){
      glbl += this.step;
      alert(glbl);
    };
  })();

  $("button").click(function(){lcl.add();});
  $("input").on("change",function(e){
    lcl.step = parseInt(e.target.value);
  });
});
</script>

サンプル

上記サンプルでは足していく値(step)をオブジェクト内に保存しています。

私の方こそ質問をよく理解していないかもしれません。。もし欲しい答えでなければすみません。。m(_ _)m

ようやく質問者様のおっしゃりたいことがわかってきたような気がするので改めて追記させてください。

当然グローバルでは加算されていないため、0が出力されてしまいます。

違います。ローカルスコープにおいてすでに参照されている変数はグローバル変数ですから、changeイベントが行われたあとにはちゃんとグローバル変数であるfile_lengthに新しい値が代入されています。

しかしながらconsole.log(file_length);//ここのグローバル変数を加算していきたい！はそもそも**changeイベントが行われた後には実行されません**。

このコードが実行されるのは**changeイベントのリスナーをinput要素に付与した直後のみ**ですから、0が出力されるんです。先ほど「ちなみに」として発言したのはこれをさしてのことです。

決してグローバル変数の値が更新されないから0が出力されるのではありません。

むしろ//console.log(file_length); ここじゃない！が正しい変更後の値を示す場所です。ここで出力される値はグローバル変数のものです。ローカル変数ではありません。

証拠としてもう一つサンプルを挙げようと思います。

<input type="text" /> <button>hogeの中身</button>
<script>
var hoge = '';

$(function(){
  $('input').on('change',function(e){
    hoge = e.target.value;
    console.log('ここじゃない！の場所 : ' + hoge);
  })
  console.log('ここのグローバル変数を加算していきたい！の場所 : ' + hoge);
});

$(function(){
  $('button').click(function(){
    console.log('ちゃんとグローバルに保存されている : ' + hoge);
  });
});
</script>

サンプル

サンプルを試していただければわかると思いますがconsole.log(file_length);//ここのグローバル変数を加算していきたい！に当たる場所は最初に一回実行されているだけです。

追記のために非常に長くなってしまいました。。すみません。。

不明点等あればまた返信ください。m(_ _)m

Comments

[pegy]

早速コメントありがとうございます。
初期値は勝手に0とJavascriptが判断してくれると誤解しておりました。
undefined+number=NaNということでしょうか。
本件はおかげ様で理解することができたのですが、
スコープの問題として、ローカルスコープでグローバルスコープの変数に加算代入演算したい場合も
あるかと想像しているのですがその様なことも可能なのでしょうか？
下記の様な方法です。当然グローバルでは加算されていないため、0が出力されてしまいます。
重ねてで誠に申し訳ございませんが、ご教示いただけましたら幸いです。

<script type="text/javascript">
var element=document.getElementById('files');
var file_length = 0;
$(function(){
$('#files').on('change',function(){
file_length+=element.files.length;
//console.log(file_length); ここじゃない！
})
console.log(file_length);//ここのグローバル変数を加算していきたい！

});
</script>

[namnium1125]

追記しました。よろしくお願いします。m(_ _)m

[pegy]

初心者の私にお付き合いをいただき申し訳ございません。。そしてありがとうございます。

>ローカルスコープでグローバル変数が使えないなんて事は無いですよ
これはローカルスコープからグローバルスコープの変数を参照することができるということかと理解しております。ご作成いただいたサンプルもグローバルの10を参照してローカル上で5を加算しているという意図でご用意いただいたのかと思います。

質問の意図としては反対でローカルで変化した変数をグローバルで参照したいということです。

>console.log(file_length);//ここのグローバル変数を加算していきたい！における出力は0が正しいです。
まさにここの部分なのですが、グローバルスコープ上の変数でもファイル数のカウントアップの状態を管理したく、0ではなくカウントアップした数が代入されてほしいということになります。

意図をうまく伝えることができずに申し訳ございません。。

[namnium1125]

追記しました。よろしくお願いします。m(_ _)m

[namnium1125]

さらにまた追記しましたので、よろしくお願いします。m(_ _)m

[pegy]

namnium1125様
詳細なサンプルまで有難うございます！大粒涙付きの感謝です。。。

最後のサンプルでいうところの
print('ここのグローバル変数を加算していきたい！の場所 : ' + hoge);
という箇所が「イベントが行われた後には実行されません。」ということなのでしょう。
これが実行される時点ではhogeには何も格納されていないため、
「ここのグローバル変数を加算していきたい！の場所 : '」が1度しか表示されないことが
仰りたい意味かと理解しました。
changeイベントやclickイベントの外なので、当然といえば当然なのかもしれませんが。。。

一度グローバルスコープで宣言し、ローカルスコープから参照した変数についてはローカル内での処理で影響を与えることができるのですね。。誤解をしておりました。
少し内容を変えて
hoge+=(e.target.value)|0;
としてみましたが、グローバル変数hogeに影響を与えていることを確認しました。
https://jsfiddle.net/mcLsarpy/2/

ただ、なぜか加算代入演算子中では|0をしてもNumber()でも文字列から変わらずに
連結されてしまいます。。。

[namnium1125]

？ビット論理和を出してどうするのでしょうか？？ごめんなさい私の方が無知なのかも…

もし3項演算子のつもりでしたら、
javascriptの3項演算子は`変数 = 条件 ? trueの時 : falseの時;`です。

こういうことがしたかったのでしょうか？
https://jsfiddle.net/mcLsarpy/5/

[pegy]

コメント有難うございます！
結果としてやりたかったことはまさに提示頂いたとおりなのですが、だ
加算代入演算（a+=c　⇒a=a+c）を使えば、
element.files.length;でファイル数を取得するたびにグローバル変数file_lengthに数値が加算されるかと
想像したのですが、（つまりアップロードされたファイル数をカウントできる。multipleなので1ずつ加算はできないので）
つまりa =file_length で c=element.files.length;ですね。|0は数値型への変換です。
ご提供の3項演算子と同じ結果が得られると思ったのですが、加算代入演算子を使用するとどうしても文字列になってしまいます。
すみません、もとの質問の趣旨からはかなりそれてしまいますが。
基本的な部分は殆ど解決したのでnamnium1125先生に心から感謝です！

[namnium1125]

あぁ、、原因判明しました。`var hoge = ''`ではなく`var hoge = 0`にしてください。解決するはずです。最初に気づかなくてすみません。。(^ ^;

https://jsfiddle.net/namnium1125/mcLsarpy/6/

[pegy]

すみません、こちらこそ凡ミスで申し訳ございません。
今回の質問で初心者ながら、1レベルアップしたと思っています。
回答者様に本当に深謝でございます。
また、こんな有意義な場を提供してくれる、teratailは素晴らしい！
改めて有難うございました。

Answer 2

formdataでテスト

$(function(){
  var file_length = 0;
  $('input[type=file]').on('change',function(){
    if($(this).closest("form").length==0){
      $(this).wrap("<form>");
    }
    var fd=new FormData($(this).closest("form").get(0));
    file_length+=fd.getAll($(this).attr("name")).length;
    console.log(file_length);
  });
});

<input type="file" name="f1" multiple />
<input type="file" name="f2" multiple />
<input type="file" name="f3" multiple />

Comments

[pegy]

コメント有難うございます。
カウント加算させるための違うアプローチとしてコードを勉強させて頂きます。

[yambejp]

挙動が想定と合致しているかだけ確認しておいて下さい。
FormDataはフォーム系処理をする場合あらゆる場面で使用されるものなので
覚えておいて損はないでしょう

[pegy]

フォーム関連の処理でformDataオブジェクトは使ったことがなかったです。早速学びに取り掛かります。貴重な情報を提供頂き、有難うございます