Base64 alternative when loading data from file input

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

When the file is loaded, I grab it src

(after I define it as Image

) and put that src directly into a property background-image

indiv.

I registered src and it appears to be a Base64 string.

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

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


This is what I am currently using:

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

      

+3


source to share


1 answer


use window.URL to create object url instead of 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 is faster and looks cleaner than FileReader based routines if the browser supports window.URL: http://caniuse.com/#search=url

+2


source







All Articles