ブラウザでアップロードするファイルの情報

Information of the file to be uploaded in the browser

ブラウザでファイルをアップロードするとき、ファイルの情報が欲しいときがあります。
クライアント側でファイル名やファイルサイズをチェックしたい、というときにはこんな感じです。

// foo はファイルをアップロードするinput要素のid
var _fileName = $('#foo')[0].files[0].name;
var _fileSize = $('#foo')[0].files[0].size;

がしかし、FileAPIに対応していないブラウザでは、上記の方法ではダメみたいです。

でどうするかというと、

var _regex = /\/|\\//;
var _path = document.getElementById('foo').value.split(_regex);
var _fileName = _path.pop();

ファイル名は取得できました！でもファイルサイズは取得できないようです。。。 

↓FileAPI対応ブラウザはこちらを確認！

http://caniuse.com/#feat=fileapi

非同期通信の待ち合わせ

Meeting of asynchronous communication.

非同期処理の完了を待って次の処理をするようなとき、コールバック地獄にならない便利なjQueryの標準モジュールDeferredです。

いろいろなところで紹介されています。
http://techblog.yahoo.co.jp/programming/jquery-deferred/
http://qiita.com/yuku_t/items/1b8ce6bba133a7eaeb23
http://api.jquery.com/category/deferred-object/

　例えば、非同期でデータを取得してビューにセットするのだけれども、読み込みが完了する前にレンダリング処理されてしまうようなときです。
　特に、非同期読み込む処理が複数のとき、それらの完了を待って描画とするとき、とても便利です。

$.when(
  // 非同期で読み込む処理１
  // 非同期で読み込む処理２
）.done(function() {
  // 読み込んだ情報をビューへセット
};

chromeでフォーカスが外されるとき

chromeでフォーカスが外れてしまう時の対応

$("セレクタ").focusout(function() {
  settimeout(function() {
    $("セレクタ").focus();
  }, 0);
});

jQueryでボタンの２度押し防止

ボタンの２通しを防止する方法はいろいろあると想います。
今使っているのはこんな感じです。

$("button").prop("disabled", true);

$("input[type='submit'].prop("disabled", true);

↓こちらと合わせて使ってます。

イベントの処理

http://blog.wakisaka-tsuyoshi.com/2013/01/blog-post_27.html

イベントの処理

なるほどなるほど

<script>
  $(function() {
    $("セレクタ").change(function() {
      // ここにonchangeの処理を書くといいよ
    });
  });
</script>

メモメモ