SIPAIIS_WMS_JSSW/WebRoot/jsp/teacher/viewpic_Layer.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<style type="text/css">
    .select2-container .select2-selection--single{
        height:34px;
        line-height: 34px;
    }
    .select2-selection__arrow{
        margin-top:3px;
    }


    .krajee-default.file-preview-fram {
        width: 48%;
    }

</style>
<!-- 文件上传-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/css/fileinput.min.css"/>
<script type="text/javascript"
        src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/fileinput.min.js"
        charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/locales/zh.js"
        charset="utf-8"></script>
<style type="text/css">
    .krajee-default.file-preview-frame .kv-file-content {
        width: auto;
    }
</style>
<script type="text/javascript">
    var masterId='${param.id}';
    var tbName='${param.tbName}'; //数据表
    var nameSpace='Document';//保存文件夹
    var previews = new Array();
    var previewConfigs = new Array();
    function showFileInput(ctrlName) {
        var control = $('#' + ctrlName);

        control.fileinput('destroy');
        control.fileinput({
            language: 'zh', //设置语言
            showUpload: false, //是否显示上传按钮
            allowedFileExtensions : ['jpg', 'png','gif','pdf','doc','xls','docx','ppt','pptx','xlsx','wmv','mp4'],
            showRemove:false,
            showCaption: false,//是否显示标题
            showBrowse:false,//选择按钮
            showClose:false,//右上角关闭按钮
            dropZoneEnabled: false,//是否显示拖拽区域
            fileActionSettings:{
                showDrag:false
            },
            browseClass: "btn btn-primary", //按钮样式
            maxFileCount: 10, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            initialPreviewAsData: true,
            initialPreview: previews,
            initialPreviewConfig:previewConfigs,
            layoutTemplates:{
                actionDelete:'',  //这行可以隐藏删除按钮
                actionUpload:''  //这行可以隐藏上传按钮
            },
            deleteUrl:ext.contextPath+"/base/deleteInputFile.do",
            deleteExtraData:function () {           //传参
                var data = {
                    "tbName": tbName
                };
                return data;
            }
        });
        $('#kvFileinputModal').on("hidden.bs.modal", function() {
            $(this).removeData("bs.modal");
            //modal重复打开会导致前面的滚动条失去作用
            $('.modal').css("overflow","auto");
        });
    }
    //名称定义不可修改
    var getFileList = function() {
        $.post(ext.contextPath + '/base/getInputFileListById.do', {id:masterId,tbName:tbName} , function(data) {
            //console.info(data)
            if(data.length>0){
                previews=new Array();
                $('#maintenancefile').show();
                for(var i=0;i<data.length;i++){
                    var previewConfig = new Object();
                    var path = data[i].abspath;
                    path=path.substring(path.indexOf('webapps')+7,path.length);
                    path =ext.basePath.replace(ext.contextPath,'')+ path.replace(/\\/g,"\/");;
                    previews.push(path);
                    previewConfig['width']= '2500px';
                    previewConfig['caption']= data[i].filename;
                    previewConfig['key']= data[i].id;
                    if( data[i].type.split("/")[0] == 'application'){
                        previewConfig['type']= 'pdf';
                    }else{
                        previewConfig['type']= data[i].type.split("/")[0];
                    }

                    previewConfig['filetype']= data[i].type;
                    previewConfigs.push(previewConfig);
                }
                showFileInput("teacherFileDiv");
            }else{
                $('#teacherFileDiv').hide();
            }
        },'json');

    };
    var fileinput = function() {
        //var url='/maintenance/updateProblemFile.do';//保存数据表方法
        $.post(ext.contextPath + '/base/fileinput.do', {masterId:masterId,tbName:tbName,nameSpace:nameSpace} , function(data) {
            $("#fileInputDiv").html(data);
            openModal('fileInputModal');
        });
    };

    $(function() {
        if(tbName==null || tbName=='' || tbName==undefined){
            tbName = 'tb_teacher_file';
        }
        getFileList();
    })

</script>
<div class="modal fade" id="subModal_Doc">
    <div class="modal-dialog">
        <div class="modal-content">
            <input type="hidden" name="id" id="id" value="${param.id}"/>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">浏览</h4>
            </div>
            <div class="modal-body">
                <!-- 新增界面formid强制为subForm -->
                <!-- <form class="form-horizontal" id="subForm" enctype="multipart/form-data" > -->
                <!-- 界面提醒div强制id为alertDiv
              <div id="alertDiv"></div>
              <div style="height: 323px;width: 550px;">
              <image style="width: 100%;height: 100%;" src="/JNSXIMG${relpath}"></image>
              </div> -->

                <div class="form-group" style="margin:8px;">
                    <input type="file" name="teacherFileDiv" id="teacherFileDiv" multiple class="file-loading" />
                </div>

                <!-- </form> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>