bootstrap批量上传附件

最新推荐文章于 2022-05-24 20:57:11 发布

我的天了噜

最新推荐文章于 2022-05-24 20:57:11 发布

阅读量635

点赞数

分类专栏：我的前端小笔记文章标签： jquery bootstrap js html

本文链接：https://blog.csdn.net/zxy_a_lion/article/details/108443875

版权

我的前端小笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

下载js和css

<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/fileinput.js"></script>
	<script src="js/fileinput_locale_zh.js"></script>
	<script src="js/jquery.i18n.js"></script>
	
	<link href="css/base.css" rel="stylesheet" />
	<link href="css/bootstrap.min.css" rel="stylesheet" />
	<link href="css/fileinput.css" rel="stylesheet" />

完整实例

<!DOCTYPE html>
<head>
	<title>测试</title>
	<meta charset="UTF-8" />
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/fileinput.js"></script>
	<script src="js/fileinput_locale_zh.js"></script>
	<script src="js/jquery.i18n.js"></script>
	
	<link href="css/base.css" rel="stylesheet" />
	<link href="css/bootstrap.min.css" rel="stylesheet" />
	<link href="css/fileinput.css" rel="stylesheet" />
</head>
<script type="text/javascript">
$(function(){
//----------------------------------打印前置后置------------------------------------------------------------
	var beforePrint = function() {
        console.log('打印前置');
    };
    var afterPrint = function() {
        console.log('打印后置');
    };
    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }
    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
	$("#printA").click(function(){
		alert("段落被点击了。");
		AA();
	});
	
});
function AA(){
	console.log('aaaaa');
	window.print();
}

//----------------------------------附件上传------------------------------------------------------------
function showfjModal(){
   		var fjTypeArray=[];
		//动态添加借款附件列表的内容
		for(var i=1;i<=5;i++){
			fjTypeArray.push({
				"xh": i,
				"uploadFile": [],
				"fjType": i,
				"fjmc": "附件"+i,
				"allowNull": "0",
				"fjlx": "file"
			});
		}
		//初始化借款附件模态框内容
		clearfjModalContent();
      	initFjTR(JSON.stringify(fjTypeArray));
      	//弹出模态框
		$("#fjDivModal").modal({
				keyboard: false
			});
	}
	
function clearfjModalContent(){
		//清空显示的行
		$("#fjDivModal").find("tr[name='fjTR']").remove();
	}

function initFjTR(fjTypeArrayStr){
		var fjTypeArray = JSON.parse(fjTypeArrayStr);
		var content = "";
		for(var i=0; i<fjTypeArray.length; i++){
			var fjmc = fjTypeArray[i].fjmc;
			var allowNull = fjTypeArray[i].allowNull;
			var uploadFile = fjTypeArray[i].uploadFile;
			//判断为必选文件、前边加*备注
			var showFjmc = fjmc;
			if(allowNull=="1"){
				showFjmc = "<span style='color:red;''><b>*</b></span>" + fjmc;
			}
			
			var uploadDivContent = "";
			for(var j=0; j<uploadFile.length; j++){
				var fileName = uploadFile[j].fileName;
				uploadDivContent += "<div name='chooseFJDIV' style='margin: 0;padding-left: 0;color:#006600;'>"
					 +		"<div class='col-md-7' name='fileNameDIV'>"
					 +			"<i class='glyphicon glyphicon-file'></i>&nbsp;"+fileName
					 +		"</div>"
					 +		"<div class='col-md-5' name='fileDIV' data-uuid='"+uploadFile[j].uuid+"' data-fileuuid='"+uploadFile[j].fileUUID+"' data-filename='"+fileName+"' data-filepathurl='"+uploadFile[j].filePath+"'>"
					 +		"</div>"
					 +	"</div>";
			}
			content = "<tr name='fjTR' data-fjtype='"+fjTypeArray[i].fjType+"' data-fjlx='"+fjTypeArray[i].fjlx+"' data-notnull='"+fjTypeArray[i].allowNull+"' data-fjmc='"+fjTypeArray[i].fjmc+"'>"
					+	"<td style='vertical-align: middle;'>"+showFjmc+"</td>"	
					+	"<td colspan='2'><div id='fjTypeDIV_"+fjTypeArray[i].fjType+"' name='fjTypeDIV' class='row' style='margin: 0;padding-left: 0;'>"+uploadDivContent+"</div></td>"
					+	"<td style='vertical-align: middle;'><input id='choosefjButton"+fjTypeArray[i].fjType+"' type='file' class='file' name='choosefjButton' multiple='multiple' accept='image/jpg,image/jpeg,image/png,.pdf,.doc,.docx'><input type='hidden' id='base64"+fjTypeArray[i].fjType+"'></td>"
					+  "</tr>";
			$("#FjTable").append(content);
			//初始化附件选择按钮
			var id = "choosefjButton" + fjTypeArray[i].fjType;
			initFjButton(id);
		}
	}
	
function initFjButton(objID){//初始化附件
		var obj = $('#' + objID);
		obj.fileinput({
        	language: 'zh', //设置语言
            uploadAsync: false, //默认异步上传
            showUpload: false, //是否显示上传按钮
            showRemove: false, //显示移除按钮
            showPreview: false, //是否显示预览
            showCaption: false,//是否显示标题
            browseClass:"btn btn-primary btn-sm", //按钮样式 
            dropZoneEnabled: false,//是否显示拖拽区域
            maxFileSize:5*1024*1024,//单位为kb，如果为0表示不限制文件大小
            maxFileCount:1, //表示允许同时上传的最大文件个数
            enctype:'multipart/form-data',
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-file'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
		}).on("filebatchselected", function(event, files) {
			//取得处于第几行tr
			var fjType = "";
			var fjTypeDIVID = "";
			//取得button按钮ID
			var choosefjButtonID = $(this).attr("id");
			if(choosefjButtonID.indexOf("choosefjButton")!=-1){
				fjType = choosefjButtonID.substring(14,choosefjButtonID.length);
				//取得要显示的DIVID
				fjTypeDIVID = "fjTypeDIV_"+fjType;
				//移除以前选择的文件展示内容
				$("#"+fjTypeDIVID).find("div[name='chooseFJDIV']").remove();
			}
			//展示选择的文件名称
			var chooseFJContent = "";
			for(var i = 0; i < files.length; i++){

				chooseFJContent += "<div name='chooseFJDIV' style='margin: 0;padding-left: 0;color:#006600;'>"
								 +		"<div class='col-md-7' name='fileNameDIV' style='color: blue;'>"
								 +			"<i class='glyphicon glyphicon-file'></i>&nbsp;"+files[i].name
								 +		"</div>"
								 +		"<div class='col-md-5' name='fileDIV' data-uuid='' data-fileuuid='' data-filename='"+files[i].name+"' data-filepathurl='' style='padding-bottom: 1px;'>"
								 +			"<button type='button' name='delFJUUIDButton' class='btn btn-primary input-sm' onclick='delFJUUID(this);'>删除</button>"
								 +		"</div>"
								 +	"</div>";
			}
			//显示选择的附件名称
			$("#"+fjTypeDIVID).append(chooseFJContent);
		});
	}
	//删除附件(删除显示的名称等所在的DIV)
	function delFJUUID(obj){
		$(obj).parent().parent().remove();
	}
	
function saveFj(){
		if(checkFj() != false){
			var formData = new FormData(); 
			formData.append("name","fj");
			$("tr[name='fjTR']").each(function(){
				var fjType = $(this).data("fjtype");
				//新上传的数据
				var files = $(this).find(".file")[0].files;
				if(files.length > 0) {//新附件
					for(var m = 0; m < files.length; m++){
						$(this).find("div[name='fileDIV']").each(function(){
							//如果是从数据库都出来的文件则跳出本次循环
							var uuid = $(this).data("uuid");
							var fileUUID = $(this).data("fileuuid");
							if(uuid=="" && fileUUID==""){
								if($(this).data("filename")==files[m].name){
									var file=files[m];
									var suffixName=files[m].name.split(".")[1];
									formData.append(fjType+"_"+files[m].name,file);
								}
							}
						});
						
					}
				}
			});
			
			//保存操作TODO
			var r=confirm(formData);
			if (r==true){
				$("#fjDivModal").modal('hide');
			}
			
		}else{
			return ;
		}
	}
	//保存附件时、校验附件是否为空
	function checkFj(){
		var returnCode = true;
		$("tr[name='fjTR']").each(function(){
			var notnull = $(this).data("notnull");
			var fjmc = $(this).data("fjmc");
			//校验必传的附件是否上传
			if(notnull=="1"){
				if($(this).find("div[name='existfjDIV']").length==0 && $(this).find("div[name='chooseFJDIV']").length==0){
					alert("附件:"+fjmc+"不能为空！"); 
					returnCode = false;
					return false;
				}
			}
		});
		return returnCode;
	}
</script>
<body>
<div style="width:800px;margin:auto;align:center;">
	<button type="button" id="printA" >打印</button>

</div>
<div style="width:800px;margin:auto;align:center;">
	<div id="fjDiv" style="padding-top:20px;">
   			<table class="table table-bordered table-condensed noBottomborder" style="margin-bottom:0px;">
   				<tr>
	    			<th class="toolTd noBottomborder">
	    			 	<span id="titleInfo" style="color:#17528e;font-size:15px;font-weight:bold;">附件列表</span>
	    			<div class="btn-group" style="float:right;">
	    			 	<button class="btn btn-primary uploadFileClass" id="uploadFileButton" style="margin:5px" onclick="showfjModal();">文件上传</button>
	    			</div>
	    			</th>
    			</tr>
   			</table>
   			<div id="fjGird" ></div>
		</div>
 
</div>

<!-- 附件模态框 -->
   	<div id="fjDivModal" class="modal fade" tabindex="-1" role="dialog">
   	<div class="modal-dialog modal-lg" role="document" style="width: 95%;">
   		<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" id="fzxxTitle">附件明细</h4>
   			</div>
     			<div class="modal-body">
     				<table class="table table-bordered table-condensed" id="FjTable" style="margin-bottom: 0px;">
     					<tr>
     						<th class="toolTd" style="width: 18%;">附件类型</th>
	   						<th class="toolTd" >附件名称</th>
	   						<th class="toolTd" style="width: 29%;">操作</th>
	   						<th class="toolTd" style="width: 9%;">选择附件</th>
     					</tr>
     				</table>
     			</div>			
     			<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    				<button type="button" class="btn btn-primary" onclick="saveFj();">保存</button>
     			</div>		
   		</div>
   	</div>
   </div>
</body>
</html>

我的天了噜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap批量上传附件

下载js和css<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/fileinput.js"></script> <script src="js/fileinput_locale_zh.js"></script> <script src="js
复制链接

扫一扫