Alternative to base64 when loading data from file-input

Question

I am currently reading a file using the HTML5 file input method.

When the file gets loaded, I grab it's src (after I define it as an Image) and put that src directly into the background-image property of a div.

I logged the src and it seems that it is a Base64 string.

Unfortunately there is an issue with encoding files to base64 and low memory on Android phones(they hang the browser).

Is it possible not to encode it to Base64 when reading the file and display it using an alternative, more memory efficient way?

---

This is what I currently use:

   function handleFileSelect(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.*')) {
                $("#alertBox").show();
                $("#alertBox").html("Oops! The link is NOT a valid image");
                window.setTimeout(function () {
                    $("#alertBox").hide()
                }, 3000);
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    var span = e.target.result;
                    uploadedImg = new Image();
                    uploadedImg.src = e.target.result;
                    uploadedImg.onload = function () {
                        changeSelectedImg(uploadedImg.src);//This is the function I use to change the background-image of a div with the src of the uploaded file, which is B64
                        proceedToView("2") 
                    }
                };
            })(f);
            reader.readAsDataURL(f);
        }
}

Answer 1

use window.URL to create an object URL instead of a dataURL:

function handleFileSelect(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.*')) {
                $("#alertBox").show();
                $("#alertBox").html("Oops! The link is NOT a valid image");
                window.setTimeout(function () {
                    $("#alertBox").hide()
                }, 3000);
                continue;
            }
            var uploadedImg = new Image();
            uploadedImg.onload = function () {
               changeSelectedImg(uploadedImg.src);
               proceedToView("2") ;
            };//end onload
            uploadedImg.src = URL.creatObjectURL(f);
        }//next
}

this runs faster and looks cleaner than FileReader-based routines, as long as the browser supports window.URL: http://caniuse.com/#search=url