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

変数宣言時に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