Pobierz dane pliku kodujące Base64 z formularza wejściowego

Mam podstawowy formularz HTML, z którego mogę pobrać trochę informacji, które badam w Firebug.

Moim jedynym problemem jest to, że próbuję kodować base64 dane pliku, zanim zostaną wysłane na serwer, gdzie wymagane jest, aby były w tej formie, aby zostały zapisane w bazie danych.

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

A w Javascript + jQuery:

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

Mam kilka operacji opartych na dostępnym javascript: .getAsBinary (), .getAsText (), .getAsTextURL

Jednak żaden z tych zwrotów nie zwraca użytecznego tekstu, który można wstawić, ponieważ zawierają bezużyteczne `` znaki '' - nie chcę, aby w przesłanym pliku pojawiało się `` ogłaszanie zwrotne '' i potrzebuję wielu formularzy dotyczących określonych obiektów, więc jest to ważne. pobierz plik i użyj w ten sposób Javascript.

Jak mam pobrać plik w taki sposób, żebym mógł użyć jednego z powszechnie dostępnych koderów Javascript base64 !?

Dzięki

Aktualizacja - Zaczynam bounty tutaj, potrzebna jest obsługa wielu przeglądarek !!!

Tutaj jestem:

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

Kilka problemów z obsługą wielu przeglądarek:

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

Ponadto IE nie obsługuje:

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

Więc muszę zamienić na:

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

Wsparcie dla IE.

Działa to w Firefoksie, Chrome i Safari (ale nie koduje poprawnie pliku lub przynajmniej po jego opublikowaniu plik nie wychodzi poprawnie)

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

Również,

file.readAsArrayBuffer() 

Wydaje się, że jest obsługiwany tylko w HTML5?

Wiele osób zasugerowało: http://www.webtoolkit.info/javascript-base64.html

Ale to zwraca tylko błąd en w metodzie UTF_8 przed kodowaniem base64? (lub pusty ciąg)

var encoded = Base64.encode(file); 

Jest to całkowicie możliwe w javascript po stronie przeglądarki.

Łatwa droga:

Metoda readAsDataURL () może już zakodować ją jako base64. Prawdopodobnie będziesz musiał usunąć początkowe elementy (do pierwszego), ale to nic wielkiego. To jednak pozbawiłoby całą zabawę.

Trudna droga:

Jeśli chcesz spróbować na własnej skórze (lub nie działa), spójrz na readAsArrayBuffer(). To da ci Uint8Array i możesz użyć określonej metody. Jest to prawdopodobnie przydatne tylko wtedy, gdy chcesz zepsuć same dane, na przykład manipulując danymi obrazu lub wykonując inną magię voodoo przed przesłaniem.

Istnieją dwie metody:

• Konwertuj na ciąg i użyj wbudowanego btoalub podobnego
  • Nie przetestowałem wszystkich przypadków, ale działa dla mnie - po prostu pobierz kody znaków
• Konwertuj bezpośrednio z Uint8Array na base64

Niedawno zaimplementowałem tar w przeglądarce . W ramach tego procesu wykonałem własną bezpośrednią implementację Uint8Array-> base64. Myślę, że nie będziesz tego potrzebować, ale jest tutaj, jeśli chcesz rzucić okiem; jest całkiem schludny.

Co ja teraz robię:

Kod konwersji na ciąg znaków z Uint8Array jest dość prosty (gdzie buf to 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;
}

Stamtąd po prostu wykonaj:

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 będzie teraz ciągiem zakodowanym w base64 i powinien załadować tylko peachy. Spróbuj tego, jeśli chcesz dwukrotnie sprawdzić przed naciśnięciem:

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

Spowoduje to pobranie go jako pliku.

Pozostałe informacje:

Aby uzyskać dane jako Uint8Array, spójrz na dokumentację MDN:

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

Moje rozwiązanie polegało na użyciu readAsBinaryString()i btoa()na jego wyniku.

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

Użyłem FileReader do wyświetlenia obrazu po kliknięciu przycisku przesyłania pliku bez użycia żadnych żądań Ajax. Poniżej znajduje się kod, który mam nadzieję, że może komuś pomóc.

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

Po tym, jak sam się z tym zmagałem, zacząłem implementować FileReader dla przeglądarek, które go obsługują (Chrome, Firefox i jeszcze niewydane Safari 6), a także skrypt PHP, który odbija dane pliku POST jako dane zakodowane w Base64 dla innych przeglądarki.

Zacząłem myśleć, że użycie „iframe” do przesyłania w stylu Ajax może być znacznie lepszym wyborem w mojej sytuacji, dopóki HTML5 nie zatoczy pełnego koła i nie będę musiał obsługiwać starszych przeglądarek w mojej aplikacji!

Zainspirowany odpowiedzią @ Josefa:

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)