Display selected image in popup / jquery confirmation

[Lau_1]

Hello, anyone have any idea on how to display selected image in popup box? and then upload.
Currently, the basic way is to display the selected image in a <div> tag, and i want to change and display the image in popup/dialog/confirmation box.
Below is the code to select image, and display the preview image in <div>

                    <div class="item form-group">
                    <label class="control-label col-md-1 col-sm-1 col-xs-12" > </label>
                    <div class="col-md-2 col-sm-12 col-xs-12">
                        <label class="btn btn-primary btn-upload" for="img" data-toggle="tooltip" title="Upload image file">Select Image</label>
                        <input class="sr-only" id="img" name="img" type="file" accept="image/*">
                    </div>
                    </div>

                    <div class="item form-group">
                    <label class="control-label col-md-1 col-sm-1 col-xs-12"> </label>
                    <div class="col-md-2 col-sm-12 col-xs-12">
                         <div id ="image_display"></div>
                    </div>
                    </div>

The javascript

$(document).ready(function(){
var fileInput = document.getElementById('img');
    var fileDisplayArea = document.getElementById('image_display');


    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var imageType = /image.*/;

        if (file.type.match(imageType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerHTML = "";

                var images = new Image();
                images.src = reader.result;

                fileDisplayArea.appendChild(images);
            }

            reader.readAsDataURL(file); 
        } else {
            fileDisplayArea.innerHTML = "File not supported!"
        }
    });
}); 

[AleMonteiro]

Since you are using bootstrap you could use BootstrapDialog, quite easy...

Just call BootstrapDialog.show({
    title: 'You title here',
    message: $(images)
});

And to upload it you could use xhr itself

var xhr = new XMLHttpRequest(),
    url = 'upload_page.php';
if (xhr.upload) {

    // file received/failed
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4) {
            if ( xhr.status == 200 ) {
                // File uploadded
                var response = xhr.responseText;
            }
            else {
                // Upload error
            }
        }
    };

    xhr.open("POST", url, true);
    xhr.setRequestHeader("X-File-Name", file.name);
    xhr.setRequestHeader("X-File-Size", file.size);
    xhr.setRequestHeader("X-File-Type", file.type);

    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.send(file);
}

[Lau_1]

thanks, fixed !

[AleMonteiro]

Glad to know =)

Just mark as solved please, you can open another thread if you need futher assistence.