23716


タイトルの通りなのですが、画像を読み込んでサーバにアップロードするまでは出来たのですが、  
アップロードしたファイルを開こうとすると「ファイルが壊れています」と表示されてしまいます。  
どなたかご教示いただけると幸いです。

HTML

[code]

        <ons-button ng-click="save()">ファイル選択 </ons-button>
    
[/code]

JS（files[i]には画像ファイルのURIが入っています）

[code]

    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);
            })
        });
    }
    
[/code]

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：  
[英語版の過去ログ](https://stackoverflow.com/questions/6850276/how-to-convert-dataurl-
to-file-object-in-javascript)を参考に下記コードで自己解決しました。

[code]

    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);
    
[/code]


CC BY-SA 3.0
2016-03-30T09:10:18.223
23621
2016-04-04T00:47:28.603
2017-05-23T12:38:55.307
-1
13177
question
javascript
javascriptのFileReaderAPIで画像を読み込んで、サーバにアップロードしたい


コードは追記2に書いたとおりですが、Reader.resultを直接投げるのではなく  
Uint8Arrayで取ってBlobを作成してやる必要がありました。


CC BY-SA 3.0
2016-04-04T00:47:28.603
23716
2016-04-04T00:47:28.603
13177
23621
answer