以前 、drag and dropとFile APIとXMLHttpRequestを使ったmultipartによるファイルの送信を書いた。実はあのXHRのsendAsBinaryはFirefoxの独自拡張でwebkit等では動かない。

なんかいまいちだよねえ。と思ったら

こてさきAjax - BlobBuilderを使ってみた
http://blog.livedoor.jp/kotesaki/archives/1557189.html

に面白いことが載っていた。

XMLHttpRequest Level2ではBlobやらFormDataがXHRで送れるんだとさ！
なんてこったい。今までmultipartのformをjsで自力で生成してFirefoxの独自拡張でバイナリで送るという涙ぐましい努力をしていたのが、

1  var upload = function(event) {
2    var data = event.dataTransfer;
3    var fd = new FormData();
4    for (var i = 0; i < data.files.length; i++)
5      fd.append("file" + i, data.files[i]);
6
7    var xhr = new XMLHttpRequest();
8    xhr.open("POST", "uploader", true);
9    xhr.send(fd);
10
11    event.stopPropagation();
12  };
13
14  dropzone.addEventListener('drop', upload, false);

こんなので済んでしまう。

他にも仕様を見たら、
http://www.w3.org/TR/XMLHttpRequest2
onprogressとかファイルのアップロードには必須だったFirefoxの独自拡張が取り込まれていたり、素敵な進化を遂げていた。

ただ困ったことにFormDataのサポートがFirefoxではまだいまいちなのか、結局この方式だと新らし目のwebkitでしか動かない。

ということで現状ではあちらが立てばこちらが立たずなのは一緒なのだった。