upload images on bootstrap model and load new uploaded image

Question

This model will load on click on icon image.

 <div class="modal fade" id="profilePicModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">           
                <div class="modal-body"><div id="jsoneditor">
                    <img src="" id="profilePic" style="width: 100%; height: 100%;" >
                </div></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

JS code for click on icon image then open model change new image on model.

$("#image").on("click", function() {
       $('#profilePic').attr('src', $(this).attr('value'));
       $('#profilePicModal').modal('show');
       $('#profilePic').cropper({
        aspectRatio: 16 / 9,
        crop: function(e) {

        }
});
    });

Answer 1

Below is the code to change images based on user selection. The images are placed in the same folder as the HTML file.

<script>
    function go(loc) {
        document.getElementById('imagechange').src = loc;
    }
</script>

<body>
    <iframe id="imagechange" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe>

    <form method="post">
        <input name="calendarSelection" type="button" Value=" River1" onclick="go('river2.jpg')" />
        <input name="calendarSelection" type="button" value=" GitHub" onclick="go('riverrafting.jpg')" />
        <input name="calendarSelection" type="button" value=" Wikipedia"  onclick="go('Employee.jpg')" />

    </form>

</body>

upload images on bootstrap model and load new uploaded image

Question

This model will load on click on icon image.

JS code for click on icon image then open model change new image on model.

1 answers

solution1
0 2016-04-28 16:24:14

upload images on bootstrap model and load new uploaded image

Question

This model will load on click on icon image.

JS code for click on icon image then open model change new image on model.

1 answers

solution1 0 2016-04-28 16:24:14

solution1
0 2016-04-28 16:24:14