スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

File APIを利用してファイルアップロード

「5000枚の写真をアップロードできるWebアプリがほしい」と無茶な依頼があったので、HTML5のFile APIを使ってサンプルを作ってみました。

サンプル)
http://5463440d.dotcloud.com/

ソースコード)
https://github.com/jou4/multi_fileupload

※上のサンプルは、サーバーが受け取ったファイルを保存しないのでアップするだけのものです。
※またリクエストのサイズも制限されているので、大きなファイルはアップできません。


ドラッグ&ドロップは、ondragover, ondragend, ondropといったイベントで制御します。
jQueryを使うのであれば、bindメソッドを利用してこんな感じでしょうか。

$("#holder")
.bind("dragover", function(){
this.className = 'hover';
return false;
})
.bind("dragend", function(){
this.className = '';
return false;
})
.bind("drop", function(e){
this.className = '';
handleFiles(e.originalEvent.dataTransfer.files);
e.preventDefault();
return false;
});

ドロップされたら、ファイルオブジェクトのリストをevent.dataTransfer.filesで取得できますが、jQueryの場合だとイベントオブジェクトがラップされているので、originalEventで取り出す必要があります。


ファイル選択ダイアログを利用する場合は、multiple属性を付与することで複数選択が可能になります。

<input id="selector" type="file" name="file[]" multiple />


ダイアログで選択されたらchangeイベントが発生します。要素を指定してfilesでファイルオブジェクトのリストを取り出します。

$("#selector").change(function(){
handleFiles(this.files);
});

ファイルの読み出しにはFileReaderを使用します。画像ファイルの場合だとこんな感じ。

var reader = new FileReader(), img = document.getElementById("image");
reader.onload = function(e){
img.src = reader.result;
};
reader.readAsDataURL(file);

readAsDataURL以外にもいくつかメソッドがありますので状況に応じて使い分けることになります。


今回は大量のファイルをアップロードすることが目的なので、一度に送信せず1ファイルずつ送信するようにしました。FormDataを使ってフォーム送信が可能になります。こんな感じです。

var fd = new FormData();
fd.append("file", file);

$.ajax({
url: "hogehoge",
type: "POST",
data: fd,
processData: false, // dataをそのまま送信させる
contentType: false,
success: function(){}
});


最後に、マルチスレッド風に並列で送信できるようにしてみました。指定されたファイルリストをいくつかのリストへ分割して、それぞれのリストを担当するループを作成する感じです。並列化するとやはり速くなりますね。ざっくりですが並列数=1を基準としたとき、並列数=2で2倍、並列数=3で3倍、並列数=4で3.5倍、並列数=5で4倍になりました。マシンのスペックなどに依存すると思いますので、一概にはいえませんが。

以前Flashを使って、同じようなアップローダーを作成したことがあるのですが、そのときはFileReferenceクラスのbrowseやload、uploadといったメソッドを同時に実行できないといった制限があったので、こういった並列化をしなかった覚えがあります。


まだ対応しているブラウザはChromeとFirefoxといったところだと思いますが、
とりあえず「5000枚の写真をアップロード」という要求には答えられそうです♪

コメントの投稿

非公開コメント

承認待ちコメント

このコメントは管理者の承認待ちです
プロフィール

jou4

Author:jou4
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。