[解決済み] 入力フォームからBase64エンコードされたファイルデータを取得する

質問

私は基本的なHTMLフォームを持っていて、そこからFirebugで調べているちょっとした情報を得ることができます。

私の唯一の問題は、私が base64 は、ファイルデータをエンコードしてからサーバーに送信し、データベースに保存するために必要な形式を指定します。

<input type="file" id="fileupload" />

そして、Javascript+jQueryで。

var file = $('#fileupload').attr("files")[0];

利用可能なjavascriptを元に、いくつかの操作を行っています。 .getAsBinary()、 .getAsText()、 .getAsTextURL

しかし、これらのどれも、挿入できる使用可能なテキストを返さないので、これらの中には 使用できない '文字' が含まれているため - アップロードしたファイルで「ポストバック」が発生するのは避けたいし、特定のオブジェクトをターゲットとする複数のフォームを持つ必要があるので、ファイルを取得してこの方法で Javascript を使用することが重要です。

広く利用されている Javascript の base64 エンコーダーの 1 つを使用できるようにするには、どのようにファイルを取得すればよいでしょうか!

ありがとうございます。

更新 - ここで懸賞金を開始、クロスブラウザのサポートが必要です!!!

私がいる場所はここです。

<input type="file" id="fileuploadform" />

<script type="text/javascript">
var uploadformid = 'fileuploadform';
var uploadform = document.getElementById(uploadformid);


/* method to fetch and encode specific file here based on different browsers */

</script>

クロスブラウザ対応に関するいくつかの問題。

var file = $j(fileUpload.toString()).attr('files')[0];
fileBody = file.getAsDataURL(); // only would works in Firefox

また、IEは対応していません。

var file = $j(fileUpload.toString()).attr('files')[0];

と置き換える必要があるんですね。

var element = 'id';
var element = document.getElementById(id);

IEサポートのため。

これは、Firefox、Chrome、および、Safariで動作します（ただし、ファイルを正しくエンコードしませんし、少なくとも投稿後にファイルが正しく表示されません）。

var file = $j(fileUpload.toString()).attr('files')[0];
var encoded = Btoa(file);

また

file.readAsArrayBuffer() 

HTML5のみ対応らしい？

多くの人が提案した。 http://www.webtoolkit.info/javascript-base64.html

しかし、これはUTF_8メソッドでエラーを返すだけで、base64エンコードする前？(または空文字列)

var encoded = Base64.encode(file); 

どのように解決するのですか？

ブラウザ側のjavascriptで完全に可能です。

簡単な方法です。

その readAsDataURL() メソッドはすでにあなたのためにそれをbase64としてエンコードしているかもしれません。おそらく、最初のもの (最初の , まで)を取り除く必要があるかもしれませんが、それは大したことではありません。しかし、これはすべての楽しみを奪うことになります。

難しい方法です。

もし、難しい方法を試したい（あるいはうまくいかない）なら、次のものを見てください。 readAsArrayBuffer() . これでUint8Arrayが手に入り、指定されたメソッドを使うことができます。これはおそらく、アップロードする前に画像データを操作したり、その他のブードゥーマジックを行うなど、データそのものをいじりたい場合にのみ有用でしょう。

2つのメソッドがあります。

• 文字列に変換して、組み込みの btoa または同様の
  • すべてのケースをテストしたわけではありませんが、私の場合、文字コードを取得するだけでうまくいきます。
• Uint8Arrayからbase64に直接変換する。

最近実装した tar をブラウザに実装しました。 . その過程で、Uint8Array->base64の直接実装を自作しました。それは必要ないと思いますが、それは を参照してください。 で見ることができます。

今、私がしていること。

Uint8Arrayから文字列に変換するコードはとてもシンプルです（bufはUint8Arrayです）。

function uint8ToString(buf) {
    var i, length, out = '';
    for (i = 0, length = buf.length; i < length; i += 1) {
        out += String.fromCharCode(buf[i]);
    }
    return out;
}

そこからは、ただやるだけ。

var base64 = btoa(uint8ToString(yourUint8Array));

これでBase64エンコードされた文字列となり、問題なくアップロードできるはずです。プッシュする前にダブルチェックしたい場合は、これを試してみてください。

window.open("data:application/octet-stream;base64," + base64);

これでファイルとしてダウンロードされます。

その他の情報です。

Uint8Arrayとしてデータを取得するには、MDNドキュメントを参照してください。

• https://developer.mozilla.org/en/DOM/FileReader