在bootstrap模型上上传图像并加载新上传的图像

时间：2016-04-28 11:42:50

标签： php twitter-bootstrap croppic

此模型将在点击图标图像时加载。

 <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代码，然后在模型上打开模型更改新图像。

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

        }
});
    });

1 个答案:

答案 0 :(得分：0)

以下是根据用户选择更改图像的代码。图像与HTML文件放在同一文件夹中。

<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>