Project2024
/
cms-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
							<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原动力 - 内容管理系统</title>
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/resource/js/webuploader-0.1.5/webuploader.css">
    <style type="text/css">
	    .file-item{display:flex;align-items: center;height: 50px;justify-content: space-between;}
	   	.file-item .info,.file-item .state{margin:0;padding:0;font-size: 14px;}
	   	.file-item .state{margin-left:50px;}
	   	.file-item .close{cursor: pointer;}
    </style>
</head>

<body>
<div class="row">
    <div class="col-md-12">
    	<h1 class="panel-heading">备份/还原</h1>
        <!--breadcrumbs start -->
        <ul class="breadcrumb">
			<li><a href="/admin/dashboard/toIndex"><i class="fa fa-home"></i> 首页</a></li>
				<li class="active">备份/还原</li>
		</ul>
        <!--breadcrumbs end -->
    </div>
</div>
<section class="panel">
    <div class="panel-body">
        <form class="col s12" id="form1" method="POST">
        	<div class="form-group form-control-medium">
				<label for="imagePath">选择数据库文件：</label>
				<div id="uploader" class="wu-example">
				    <!--用来存放文件信息-->
				    <div id="thelist" class="uploader-list"></div>
				    <div class="btns">
				        <div id="picker">选择文件</div>
				    </div>
				</div>
			</div>
            <div class="form-btn-group-left">
            	<button type="button" class="btn btn-info" onclick="confrim();">还原</button>
            </div>
        </form>
    </div>
</section>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="confrim-dialog" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
				<h4 class="modal-title">操作提示？</h4>
			</div>
			<div class="modal-body">
				<div class="alert alert-block alert-danger">
					<strong>注意!</strong> 备份还原操作，会对原数据库数据表进行删除重建。
				</div>
				<h4 class="modal-title">您确定要执行还原操作吗？</h4>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="restore();">确定</button>
				<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
			</div>
        </div>
    </div>
</div>

<script src="/resource/js/jquery.min.js"></script>
<script src="/resource/js/bootstrap.min.js"></script>
<script src="/resource/js/webuploader-0.1.5/webuploader.js"></script>
<script src="/resource/js/coco-message/coco-message.js"></script>
<script>
	var files = 0;
	$(document).ready(function () {
		//初始化上传组件
		initUploader("picker","file-priview");
	})
	
	//初始化上传组件
	function initUploader(picker,el){
	   	uploader = WebUploader.create({
	   		auto: true,
	        // swf文件路径
	        swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
	        // 文件接收服务端。
	        server: '/upload/uploadFile',
	        // 选择文件的按钮。可选。
	        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	        pick: '#' + picker,
	        fileNumLimit: 100,
	        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	        resize: false,
	        accept: {
	        	title: 'Images',
	        	extensions: 'sql,txt',
	        }
	    });
	    // 验证文件格式以及文件大小
	    uploader.on("error", function (type) {
	    	var msg = "";
	        if (type == "Q_TYPE_DENIED") {
	            msg = "请上传SQL、TXT格式文件";
	        }else {
	            msg = "上传出错！请检查后重新上传！错误代码" + type;
	        }
	        uploader.reset();
			cocoMessage.error(msg);
	    });
	   	// 当有文件被添加进队列的时候
	   	uploader.on('fileQueued', function(file) {
	   		$("#form1").prepend("<input id='file-input-" + file.id + "' type='hidden' name='files[" + files + "]' />");
	   		
	   	    $("#thelist").append( '<div id="' + file.id + '" class="file-item">' +
	   	        '<h4 class="info">' + file.name + '</h4>' +
	   	        '<p class="state">等待上传...</p>' +
	   	        '<i class="close fa fa-times-circle" onclick="removeFile(\''+file.id+'\')"></i>' +
	   	    '</div>' );
	   		
	   		files++;
	   	});
	    uploader.on('uploadSuccess', function(file, response) {
	    	$("#file-input-"+file.id).val(response.data.filepath);
	        $("#" + file.id + ">.state").html('上传成功！');
	    	uploader.reset();
			cocoMessage.success("上传成功");
	    });
	    uploader.on('uploadError', function( file ) {
			uploader.reset();
			cocoMessage.error("上传失败");
	    });
	}
	
	//删除文件上传队列
	function removeFile(id){
		$("#file-input-"+ id).remove();
		$("#" + id).remove();
		uploader.removeFile(id, true);
	}
	
	function confrim(){
		var inputs = $("input[id^='file-input-']");
		if(inputs.length <= 0){
			cocoMessage.error("请先选择备份文件");
			return;
		}
		$("#confrim-dialog").modal();
	}
	//还原数据库
	function restore(){
		var inputs = $("input[id^='file-input-']");
		
		var datas = new Array();
		for(var i = 0;i < inputs.length;i++){
			datas.push($(inputs[i]).val());
		}
		
		$.ajax({
			url : "/admin/database/restore",
			contentType : 'application/json',
			data : JSON.stringify(datas),
			type : "POST",
			dataType : "JSON",
			success : function(result) {
				$("#confrim-dialog").modal('hide');
				if(result.success){
					cocoMessage.success(result.info);
				}else{
					cocoMessage.error(result.info);
				}
			}
		});
	}
</script>			
</body>
</html>