图片多传和查看

马宇豪

2023-08-24 39b7bd04dc871134c332ab7396a2a6e7d7805a3a

 src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotDanger.html

@@ -103,11 +103,13 @@
                <div class="form-group">
                    <label class="col-sm-4 control-label ">隐患视图：</label>
                    <div class="col-sm-8">
                        <img style="width: 100px; height: 100px;cursor:pointer;"
                        <img style="width: 100px; height: 100px;cursor:pointer;display: none"
                             title="查看图片"
                             class="allPics"
                             th:src="*{preRectifyPhoto}"
                             onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"
                             th:data-id="${hiddenDangerCheckPoint.id}">
                        <div class="image-container"></div>
                    </div>
                </div>
            </div>
@@ -146,6 +148,28 @@
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jquery-steps-js"/>
<script type="text/javascript">
    $(document).ready(function () {
        var imgsUrl = $('.allPics');
        var imageUrls = imgsUrl.attr('src')
        var imageContainer = document.querySelector('.image-container');

        // 将逗号分隔的字符串拆分为URL数组
        var imageUrlArray = imageUrls.split(',');

        // 遍历URL数组并创建img元素
        imageUrlArray.forEach(function(url) {
            var img = document.createElement('img');
            img.setAttribute('src', url);
            img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;');
            img.setAttribute('title', '查看图片');
            img.setAttribute('data-id', hiddenDangerCheckPoint.id);
            img.addEventListener('click', function() {
                showPicture(this.getAttribute('data-id'), 'preRectifyPhoto');
            });
            imageContainer.appendChild(img);
        });
    });

    /* 图片--查看 */
    function showPicture(id,type) {
        var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}";