将动态插入的图像的文件路径推送到javascript中的数组中

Question

I'm trying to make an image slider. I have an array of objects like this:

var slides = [
    {
        img: 'images/one.jpg',
        text: 'First Image' 
    },
    {
        img: 'images/two.jpg',
        text: 'Second Image'
    }
];

I need to have the functionality to add more images into the image slider. Hence I need to obtain the file path of the image I will be uploading and push that file path into this slides array.

I have gone through this SO answer, which effectively teaches how to upload and display an image, but my needs are different.

HTML

        <div id="slide-container">

        </div>

        <div id="panel-container">
            <form>
                <label>
                    <span>Image Text</span>
                    <input type="text" class="form-control" id="image-related-text">
                </label>
                <label>
                    <span>Duration</span>
                    <input type="text" class="form-control" id="time-duration">
                </label>
                <div id="d">
                    <input type="file" id="image-upload">
                </div>

                <button id="add" disabled="true">Add to Container</button>
            </form>
        </div>

JS

var global_image_url = "";

// add the image and the relevant text in the slider on click of this button
$('#add').click(function(){

    var imageRelatedText = $('#image-related-text').val();
    var timeDuration = $('#time-duration').val();

    // a new object to be pushed inside the 'slides' array
    var temp_obj = {
        img: 'nothing for now :|', //this should contain the image url
        text: imageRelatedText
    };
})

$('#image-upload').change(function(){
    global_image_url = readUrl(this);
    console.log(global_image_url);  
});

// this function gets called when an image file is chosen
function readUrl(input){

    var img = $('<img>');
    var local_image_url = ""; // thought I would store the file path in this variable

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {

            local_image_url = JSON.stringify(e.target.result);

            img.attr('src', e.target.result);
            img.attr('height','100%');
            img.attr('width','97%');
        }
        reader.readAsDataURL(input.files[0]);
    }

    console.log(local_image_url); // chrome developer tools freezes
    return local_image_url;
}

I thought e.target.result would give the url but that's not the case. It's just another object (printed in the console once).

So how do I achieve my requirements?

Thanks!

Answer 1

yes e.target.result will the url, but remember FileReader reader the file content as asynchronous, if you want to output the value, you need to add some callback like :

$('#image-upload').change(function(){
   readUrl(this,function(){
         console.log(global_image_url);  
    });

});

// this function gets called when an image file is chosen
function readUrl(input,callback){

    var img = $('<img>');
    var local_image_url = ""; // thought I would store the file path in this variable

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            typeof callback == 'function' && callback(e.target.result);
            local_image_url = JSON.stringify(e.target.result);

            img.attr('src', e.target.result);
            img.attr('height','100%');
            img.attr('width','97%');
        }
        reader.readAsDataURL(input.files[0]);
    }

}