XHR を使用してアップロードできるように、ファイル オブジェクトをクロス ドメイン iframe に渡す必要があります。クロスドメイン通信に easyXDM を使用していますが、関連するポイントは、ブラウザーがこのオブジェクトの受け渡しをどのように処理するかです。
fileUpload: function (data, success, error) {
var file = data.file,
name = data.name,
size = data.size,
params = data.params;
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (e) {
if (e.lengthComputable)
console.log(e.loaded);
}
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4)
success();
}
params = params || {};
params['qqfile'] = name;
var queryString = qq.obj2url(params, '/api/2/photo/upload');
xhr.open("POST", queryString, true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("X-File-Name", encodeURIComponent(name));
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.send(file);
}
上記のメソッドは、データが postMessage API 経由で渡された後に呼び出されます。ここに到達すると、以前は次のように表示されていた File オブジェクト (Web インスペクターからの印刷):
File
lastModifiedDate: Mon Jul 13 2009 23:32:31 GMT-0600 (Mountain Daylight Time)
name: "Chrysanthemum.jpg"
size: 879394
type: "image/jpeg"
webkitRelativePath: ""
__proto__: File
ファイルを持たないプレーンなオブジェクトになりました:
Object
lastModifiedDate: "2009-07-14T05:32:31.000Z"
name: "Chrysanthemum.jpg"
size: 879394
type: "image/jpeg"
webkitRelativePath: ""
__proto__: Object
したがって、ファイル参照が失われると、Xhr はアップロード時にバイナリ データを渡しません。File オブジェクトを iframe に正常に渡すにはどうすればよいですか?