File API & XMLHttpRequestでファイルアップロード

大容量ファイルのアップロード周りを便利にしようと思いいいのみつけた、blueimp jQuery-File-Upload。

https://github.com/blueimp/jQuery-File-Upload

なかなかいいじゃないかと途中まで組み込んで問題発生。orz

・問題点１
アップロード後のサーバサイドでの処理に時間がかかる場合、それも進捗状況表示に加えたいのだがいまいちやり方がわからない。


・問題点２
IEが微妙に未対応。アップロード自体は可能。


・問題点３
ファイルサイズが大きい（233MB以上）とアップロードできない。

１は調べれば何とかなりそう、２はとりあえずアップロードは可能なので目を瞑る。
３はかなり問題。本来の目的が大容量のファイルの扱いだったので。

でどこが悪いのかな～と調査開始。
単純化するために、JavascriptのFile APIとXMLHttpRequest + PHPで簡単にアップロードの仕組みを作ってみた。

jQueryも使って、Javascriptはこんな感じ↓
（参考URL：　http://d.hatena.ne.jp/takuya_1st/20121101/1351754417　ありがとうございます）

$('#upload').bind('click', function(){
var fd = new FormData();
var f = document.getElementById("file").files[0];
fd.append('userfile', f);
$.ajax({
async: true,
xhr : function(){
XHR = $.ajaxSettings.xhr();
if (XHR.upload) {
XHR.upload.addEventListener(
'progress',
function (e) {
progre = parseInt(e.loaded/e.total*10000)/100 ;
console.log(progre+"%") ;
$("#progress_bar").width(parseInt(progre/100*300*100)/100+"px");
$("#progress_bar").height("30px");
$("#progress_bar").html(progre+"%");
},
false
);
}
return XHR;
},
url:  "",
type: "post",
data:fd,
contentType: false,
processData: false
}).done(function(msg) {
console.log(msg);
$("#output").append(msg);
});
});

Chromeは問題なし。
FireFoxは大きいファイルでこけることがある。FFを再起動すると問題ないのでFFのメモリ関係でしょうか（未検証）。
IEはFile APIとかFormDataが使えないので当然ながら動きません。

サーバ側は同じプログラムで受けとっているので、問題３はblueimp jQuery-File-Uploadによるものかな？　これに手を入れるのはためらわれるということでしゃーない自作するか。

今回はサーバ側も自由にいじれるのでPHPのAPCやPHP5.4を使うのもいいんだが、他で使うことも考えてFile API & XMLHttpRequestで突き進んでみよう。
IEだけ分岐して単純な仕様でないてもらおう。

つくづく適当だな。