web-dev-qa-db-ja.com

入力フォームからBase64エンコードファイルデータを取得する

Firebugで調べている少しの情報を取得できる基本的なHTMLフォームがあります。

私の唯一の問題は、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 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

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

var encoded = Base64.encode(file);
javascripthtmlfile-uploadbase64
90
jordan.baucke

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

簡単な方法：

readAsDataURL（） メソッドは、すでにbase64としてエンコードしている場合があります。おそらく最初のもの（最初まで）を削除する必要がありますが、それは大したことではありません。しかし、これはすべての楽しみを排除します。

難しい方法：

難しい方法で試してみたい場合（または機能しない場合）は、readAsArrayBuffer()をご覧ください。これによりUint8Arrayが得られ、指定されたメソッドを使用できます。これはおそらく、アップロードする前に画像データの操作や他のブードゥー教の魔法のように、データ自体をいじりたい場合にのみ有用です。

2つの方法があります。

  • 文字列に変換し、組み込みのbtoaまたは類似のを使用します
    • すべてのケースをテストしたわけではありませんが、私のために動作します-文字コードを取得するだけです
  • Uint8Arrayからbase64に直接変換する

最近、 ブラウザのtar を実装しました。そのプロセスの一環として、私は自分で直接Uint8Array-> base64を実装しました。私はあなたがそれを必要とするとは思わないが、それは here である。それはかなりきれいです。

私が今していること：

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はbase64でエンコードされた文字列になり、桃色だけをアップロードするはずです。プッシュする前に再確認したい場合はこれを試してください：

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

これにより、ファイルとしてダウンロードされます。

その他の情報：

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

113
beatgammit

私の解決策は、結果にreadAsBinaryString()とbtoa()を使用することでした。

uploadFileToServer(event) {
    var file = event.srcElement.files[0];
    console.log(file);
    var reader = new FileReader();
    reader.readAsBinaryString(file);

    reader.onload = function() {
        console.log(btoa(reader.result));
    };
    reader.onerror = function() {
        console.log('there are some problems');
    };
}
22
Josef

FileReaderを使用して、Ajaxリクエストを使用せずにファイルアップロードボタンをクリックしたときに画像を表示しました。以下は、それが何らかの助けになるかもしれないというコードです。

$(document).ready(function($) {
    $.extend( true, jQuery.fn, {        
        imagePreview: function( options ){          
            var defaults = {};
            if( options ){
                $.extend( true, defaults, options );
            }
            $.each( this, function(){
                var $this = $( this );              
                $this.bind( 'change', function( evt ){

                    var files = evt.target.files; // FileList object
                    // Loop through the FileList and render image files as thumbnails.
                    for (var i = 0, f; f = files[i]; i++) {
                        // Only process image files.
                        if (!f.type.match('image.*')) {
                        continue;
                        }
                        var reader = new FileReader();
                        // Closure to capture the file information.
                        reader.onload = (function(theFile) {
                            return function(e) {
                                // Render thumbnail.
                                    $('#imageURL').attr('src',e.target.result);                         
                            };
                        })(f);
                        // Read in the image file as a data URL.
                        reader.readAsDataURL(f);
                    }

                });
            });
        }   
    });
    $( '#fileinput' ).imagePreview();
});
14
rozar

自分でこれに苦労した後、それをサポートするブラウザー（Chrome、Firefox、まだリリースされていないSafari 6）にFileReaderと、POSTされたファイルデータをBase64としてエコーバックするPHPスクリプトを実装しました-他のブラウザのエンコードされたデータ。

1
Chris Nolet

HTML5が完全な円になり、アプリでレガシーブラウザーをサポートする必要がなくなるまで、Ajaxスタイルのアップロードに 'iframe'を使用することは私の状況にとってはるかに良い選択であると考え始めました。 ！

0
jordan.baucke