SIPAIIS_WMS_JSSW/WebRoot/jsp/work/channelPortConfigView.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!-- 文件上传-->
<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>
<script type="text/javascript">
	var filelist = new Array();

	var previews = new Array();
	var previewConfigs = new Array();
	var tbName = 'tb_doc_file';

	function showFileInput(ctrlName) {
		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,
				showDownload: true,                            // 显示下载按钮 （这个也很重要）
			},
			browseClass: "btn btn-primary", //按钮样式
			maxFileCount: 10, //表示允许同时上传的最大文件个数
			enctype: 'multipart/form-data',
			validateInitialCount: true,
			previewFileIcon: "<i class='fa fa-file'></i>",
			preferIconicPreview: true,//是否强制相关文件展示icon
			initialPreviewAsData: true,
			previewFileIconSettings: {
				'doc': '<i class="fa fa-file-word-o" style="color:#3c8dbc;"></i>',
				'docx': '<i class="fa fa-file-word-o" style="color:#3c8dbc;"></i>',
				'xls': '<i class="fa fa-file-excel-o" style="color:#00a65a ;"></i>',

				'xlsx': '<i class="fa fa-file-excel-o" style="color:#00a65a ;"></i>',
				'pptx': '<i class="fa fa-file-powerpoint-o" style="color:#f39c12;  "></i>',
				'ppt': '<i class="fa fa-file-powerpoint-o" style="color:#f39c12;  "></i>',
				//'jpg': '<i class="fa fa-file-image-o" style="color:#00a65a "></i>',
				'pdf': '<i class="fa fa-file-pdf-o" style="color:#dd4b39 ;"></i>',
				'zip': '<i class="fa fa-file-zip-o" ></i>',
			},
			initialPreview: previews,
			initialPreviewConfig: previewConfigs,
			layoutTemplates: {
				actionDelete: '',  //这行可以隐藏删除按钮
				actionUpload: ''  //这行可以隐藏上传按钮
			}
		});
		control.on('filezoomhide', function (event, params) {
			//关闭预览模态框后清空内部，防止音视频继续播放
			$(params.modal).find('.kv-zoom-body').empty();
		});
		$('#kvFileinputModal').on("hidden.bs.modal", function () {
			$(this).removeData("bs.modal");
			//modal重复打开会导致前面的滚动条失去作用
			$('.modal').css("overflow", "auto");
		});
		//导入文件上传完成之后的事件
		control.on("fileuploaded", function (event, data, previewId, index) {
			if(data.response.suc) {
				closeModal('fileInputEditModal');
				$("#fileTable").bootstrapTable('refresh');
			}
			if(!data.response.pdf) {
				closeModal('fileInputModal');
				$("#fileTable").bootstrapTable('refresh');
				showAlert('d','上传的文件转换为预览PDF格式失败！');
			}
		});
	}

	//名称定义不可修改
	var getFileList = function () {
		$.post(ext.contextPath + '/base/getInputFileListById.do', {
			id: '${channelPortConfig.id}',
			masterId: '${channelPortConfig.id}',
			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['size'] = data[i].size;
					previewConfig['filetype'] = data[i].type;
					previewConfigs.push(previewConfig);
				}
			}

			showFileInput("filelist");
			/*else {
                $('#filelist').hide();
            }*/
		}, 'json');

	};

	$(function(){
		$("#unitid").val(unitId)
		getFileList();
	});

</script>
<div class="modal fade" id="subModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <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">
                <!-- 界面提醒div强制id为alertDiv -->
                <div id="alertDiv"></div>
			    <input type="hidden" id="unitid" name="unitid">
			    <input type="hidden" id="id" name="id" value="${channelPortConfig.id}">
			   <div class="form-group" >
				   <label class="col-sm-2 control-label">图片</label>
				   <div class="col-sm-10">
					   <input type="file" name="filelist" id="filelist" multiple class="file-loading" />
				   </div>
			   </div>
           </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
<%--        <button type="button" class="btn btn-primary" onclick="dosave()" id="btn_save">保存</button>--%>
      </div>
    </div>
  </div>
</div>