javascriptのFileReaderAPIで画像を読み込んで、サーバにアップロードしたい
タイトルの通りなのですが、画像を読み込んでサーバにアップロードするまでは出来たのですが、
アップロードしたファイルを開こうとすると「ファイルが壊れています」と表示されてしまいます。
どなたかご教示いただけると幸いです。
HTML
<ons-button ng-click="save()">ファイル選択 </ons-button>
JS(files[i]には画像ファイルのURIが入っています)
for (i=0; i<files.length; i++){
window.resolveLocalFileSystemURL(files[i], function(fileEntry){
fileEntry.file(function(fileObj) {
var file;
var fileReader = new FileReader();
fileReader.onload = function(e) {
file = fileReader.result;
Upload.upload({
url: URL,
data: {
file: file,entity: Upload.json({name: name})
}
})
};
fileReader.readAsBinaryString(fileObj);
})
});
}
FileReaderAPIを使わずにHTMLのinput type=fileでファイル選択してアップロードした場合は画像として開けます。
アップロード部分はng-file-uploadを利用しています。
追記:
質問がわかりにくくて申し訳ありません。
<input type="file" name="file" onchange="save(this.files);" />
for (i=0; i<files.length; i++){var file = files[i];}
と書いた時にfileに入るオブジェクトを、
「file:///data/data/(app id)/cache/aaa.jpg」というURIから生成したいのですが
どのようにすればよいでしょうか?という質問です。
追記2:
英語版の過去ログを参考に下記コードで自己解決しました。
var file;
var fileReader = new FileReader();
fileReader.onload = function(e) {
var arr = fileReader.result.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){u8arr[n] = bstr.charCodeAt(n);}
file = new Blob([u8arr], {type:mime});
// (アップロード処理)
};
fileReader.readAsDataURL(fileObj);