YangHuOperation/web/common/js/uploadImg.js

'use strict';

/**
 *
 *
 * @author Zhong
 * @date 2018/10/17
 * @version
 */

$(document).ready(function () {
    //每页显示的图片数（后端也进行了控制）
    const perImgs = 3;
    /*
     * 上传图片，清单规则、定额说明、定额工程量计算规则共用
     * 通过各自的上传图片按钮value值判定触发来源
     * 根据触发来源放置图片位置，一个来源一个文件夹，便于管理
     * */
    let curTrigger = '';
    //同一页面中的所有触发器（定额中的说明和工程量计算规则都能上传图片）
    let allTriggers = $('.uploadImgTrigger');
    for(let theTrigger of allTriggers){
        //点击上传图片
        $(theTrigger).click(function () {
            curTrigger = $(theTrigger).attr('trigger');
            loadImges(curTrigger, 1);
        });
    }
    $('#uploadImgFile').change(function(){
        let file = $(this)[0],
            img = file.files[0],
            trigger = curTrigger;//触发源
        if(img){
            let formData = new FormData();
            formData.append('file', img);
            formData.append('trigger', trigger);
            $.ajax({
                url: '/stdBillsEditor/uploadImg',
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $.bootstrapLoading.start();
                },
                success: function(response){
                    loadImges(trigger, 1);
                },
                error: function(){
                    alert('上传失败');
                    $.bootstrapLoading.end();
                }
            });
        }
    });

    /*
     * 根据触发源和页码，按时间大小降序加载图片
     * @param {String}trigger(触发源，同源同文件夹) {Number}page(要展示的页码)
     * */
    function loadImges(trigger, page) {
        if(!$.bootstrapLoading.isLoading()){
            $.bootstrapLoading.start();
        }
        CommonAjax.post('/stdBillsEditor/loadImgs', {trigger, page}, function (rstData) {
            initImgsDiv(page, rstData.pageCount, rstData.currentImgsUrl);
            if($.bootstrapLoading.isLoading){
                $.bootstrapLoading.end();
            }
        }, function () {
            if($.bootstrapLoading.isLoading){
                $.bootstrapLoading.end();
            }
        });
    }

    /*
     * 根据图片路径删除图片
     * @param {String}trigger(操作源) {String}url(要删除图片的url)
     * */
    function delImg(trigger, url) {
        $.bootstrapLoading.start();
        CommonAjax.post('/stdBillsEditor/delImg', {trigger, url}, function (rstData) {
            let curPage = parseInt($('#pageInfo').text().trim().split('/')[0]);
            loadImges(trigger, curPage);
        }, function () {
            $.bootstrapLoading.end();
        });
    }

    /*
    * 设置图片展示DIV
    * @param {Number}curPage(当前页码) {Number}pageCount(页面总数) {Array}imgsUrl(所要展示图片的Url域后片段)
    * @return{void}
    * */
    function initImgsDiv(curPage, pageCount, imgsUrl) {
        //去掉端口的源
        let trigger = curTrigger;
        $('#prevPage').removeAttr('disabled');
        $('#nextPage').removeAttr('disabled');
        if(curPage <= 1){
            $('#prevPage').attr('disabled', '');
        }
        if(curPage == pageCount){
            $('#nextPage').attr('disabled', '');
        }
        $('#pageInfo').text(`${curPage} / ${pageCount}`);
        $('#imgsDiv').find('.card').remove();
        for(let imgUrl of imgsUrl){
            let idx = imgsUrl.indexOf(imgUrl);
            if(idx < perImgs){
                //时间戳转化成时间显示
                let date = new Date(parseInt(imgUrl.split('/').pop().split('.')[0])).toLocaleString();
                date = date.replace(new RegExp('/', 'g'), '-').split(' ')[0];
                let cardHtml = `<div class="card"><img class="card-img-top" src="/${imgUrl}" alt="Card image cap" height="180px"><div class="card-block"><p class="card-text">
                                <input class="form-control form-control-sm" value="<img src='/${imgUrl}'>" readonly="readonly"><small class="mr-2">${date} 上传</small>
                                <a href="javascript:void(0);" class="text-danger" delUrl="${imgUrl}" id="del${idx}">删除</a></p></div></div>`;
                $('#imgsDiv').find(`.col-4:eq(${idx})`).html(cardHtml);
                //删除图片
                $(`#del${idx}`).click(function () {
                    delImg(trigger, $(this).attr('delUrl'));
                });
            }
        }
    }
    //上一页
    $('#prevPage').click(function () {
        let curPage = parseInt($('#pageInfo').text().trim().split('/')[0]) - 1;
        //加载图片
        loadImges(curTrigger, curPage);
    });
    //下一页
    $('#nextPage').click(function () {
        let curPage = parseInt($('#pageInfo').text().trim().split('/')[0]) + 1;
        //加载图片
        loadImges(curTrigger, curPage);
    });
});