html5uploaderで複数アップロード時のバグ修正

Gmailのようなドラッグアンドドロップでファイルをアップロードする機能が使いたかったので探していたところ、見つけたのがhtml5uploaderです。JSと、サーバーサイドのPHPが付いてます。

html5uploader

デモ
http://www.weeby.pl/blog/html5uploader/uploader.html

比較的簡単な構造で最低限のアップロード機能を実装しているので、elFinderと組み合わせて使うことにしました。

で、表題のバグですが、複数のファイルを同時にアップロードすることはできるのですが、時々サーバからNo file to uploadというメッセージが返ってくることがあります。リクエストを見ると、送るはずのContent-Lengthが0バイトで、データを送信していないようです。

原因はonloadendイベントの関数でreaderオブジェクトを直接呼び出して使ってるからですね。というわけで修正。

// Once the process of reading file
this.loadEnd = function() {
	bin = reader.result;

を

// Once the process of reading file
this.loadEnd = function() {
	bin = event.target.result;

に修正して完了です。

Pluploadの方が高性能かつソースもきれいでよく出来てるのですが、GPLなんですよね。コマーシャルライセンスは10ユーロなんで良心的で安いんですが。今回はファイルマネージャーに統合しちゃいたかったので、小型のhtml5uploaderにしてみました。

elFinderがDnDのアップロードに対応しないかなぁ。

タグ: html5, JavaScript, PHP

コメントを残すか、ご自分のサイトからトラックバックすることができます。