Dapatkan Base64 menyandikan file-data dari Formulir Input

Saya memiliki formulir HTML dasar yang darinya saya dapat mengambil sedikit informasi yang saya periksa di Firebug.

Satu-satunya masalah saya adalah saya mencoba untuk menyandikan base64 data file sebelum dikirim ke server di mana itu harus dalam bentuk itu untuk disimpan ke database.

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

Dan di Javascript + jQuery:

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

Saya memiliki beberapa operasi berdasarkan javascript yang tersedia: .getAsBinary (), .getAsText (), .getAsTextURL

Namun tidak satu pun dari teks yang dapat digunakan kembali ini yang dapat dimasukkan karena mengandung 'karakter' yang tidak dapat digunakan - Saya tidak ingin terjadi 'postback' di file saya yang diunggah, dan saya perlu memiliki beberapa formulir yang menargetkan objek tertentu jadi penting bagi saya dapatkan file dan gunakan Javascript dengan cara ini.

Bagaimana cara mendapatkan file sedemikian rupa sehingga saya dapat menggunakan salah satu pembuat enkode Javascript base64 yang tersedia secara luas !?

Terima kasih

Perbarui - Mulai bounty di sini, perlu dukungan lintas browser !!!

Di sinilah saya berada:

<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>

Beberapa masalah dengan dukungan lintas browser:

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

Selain itu, IE tidak mendukung:

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

Jadi saya harus mengganti dengan:

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

Untuk Dukungan IE.

Ini berfungsi di Firefox, Chrome dan, Safari (tetapi tidak menyandikan file dengan benar, atau setidaknya setelah diposting, file tidak keluar dengan benar)

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

Juga,

file.readAsArrayBuffer() 

Sepertinya hanya didukung di HTML5?

Banyak orang menyarankan: http://www.webtoolkit.info/javascript-base64.html

Tapi ini hanya mengembalikan kesalahan en pada metode UTF_8 sebelum base64 mengkodekan? (atau string kosong)

var encoded = Base64.encode(file); 

Ini sepenuhnya mungkin dalam javascript sisi browser.

Cara mudahnya:

Metode readAsDataURL () mungkin sudah mengenkodekannya sebagai base64 untuk Anda. Anda mungkin perlu menghapus hal-hal awal (hingga yang pertama,), tetapi itu bukan masalah besar. Ini akan menghilangkan semua kesenangan.

Cara yang sulit:

Jika Anda ingin mencobanya dengan cara yang sulit (atau tidak berhasil), lihat readAsArrayBuffer(). Ini akan memberi Anda Uint8Array dan Anda dapat menggunakan metode yang ditentukan. Ini mungkin hanya berguna jika Anda ingin mengacaukan datanya sendiri, seperti memanipulasi data gambar atau melakukan sihir voodoo lainnya sebelum Anda mengunggah.

Ada dua metode:

• Ubah menjadi string dan gunakan built-in btoaatau serupa
  • Saya belum menguji semua kasus, tetapi bekerja untuk saya - dapatkan saja kode karakternya
• Konversi langsung dari Uint8Array ke base64

Saya baru-baru ini menerapkan tar di browser . Sebagai bagian dari proses itu, saya membuat implementasi Uint8Array-> langsung saya sendiri. Saya tidak berpikir Anda akan membutuhkannya, tetapi ada di sini jika Anda ingin melihatnya; itu cukup rapi.

Apa yang saya lakukan sekarang:

Kode untuk mengonversi menjadi string dari Uint8Array cukup sederhana (di mana buf adalah 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;
}

Dari sana, lakukan saja:

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 sekarang akan menjadi string berenkode base64, dan seharusnya diupload sangat bagus. Coba ini jika Anda ingin memeriksa ulang sebelum mendorong:

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

Ini akan mengunduhnya sebagai file.

Info lain:

Untuk mendapatkan data sebagai Uint8Array, lihat dokumen MDN:

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

Solusi saya adalah menggunakan readAsBinaryString()dan btoa()hasilnya.

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');
    };
}

Saya menggunakan FileReader untuk menampilkan gambar dengan mengklik tombol unggah file tidak menggunakan permintaan Ajax. Berikut ini adalah kode berharap itu dapat membantu seseorang.

$(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();
});

Setelah berjuang dengan ini sendiri, saya datang untuk mengimplementasikan FileReader untuk browser yang mendukungnya (Chrome, Firefox dan Safari 6 yang belum dirilis), dan skrip PHP yang menggemakan kembali data file POSTed sebagai data yang dikodekan Base64 untuk yang lain. browser.

Saya mulai berpikir bahwa menggunakan 'iframe' untuk pengunggahan gaya Ajax mungkin merupakan pilihan yang jauh lebih baik untuk situasi saya sampai HTML5 menjadi lingkaran penuh dan saya tidak harus mendukung browser lama di aplikasi saya!

Terinspirasi oleh jawaban @ Josef:

const fileToBase64 = async (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (e) => reject(e)
  })

const file = event.srcElement.files[0];
const imageStr = await fileToBase64(file)