1 Star 0 Fork 47

北方糙汉子 / Light Year Admin Using Iframe v5

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
lyear_pages_add_doc.html 12.95 KB
一键复制 编辑 原始数据 按行查看 历史
笔下光年 提交于 2022-11-01 21:00 . 提交代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>新增文档 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--tags插件css-->
<link type="text/css" rel="stylesheet" href="js/jquery-tagsinput/jquery.tagsinput.min.css">
<!--上传插件css-->
<link type="text/css" rel="stylesheet" href="js/webuploader/webuploader.css">
<!--灯箱效果插件css-->
<link type="text/css" rel="stylesheet" href="js/magnific-popup/magnific-popup.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<header class="card-header"><div class="card-title">新增文档</div></header>
<div class="card-body">
<form action="#!" method="post" class="row">
<div class="mb-3 col-md-12">
<label for="type" class="form-label">栏目</label>
<div class="form-controls">
<select name="type" class="form-select" id="type">
<option value="1">小说</option>
<option value="2">古籍</option>
<option value="3">专辑</option>
<option value="4">自传</option>
</select>
</div>
</div>
<div class="mb-3 col-md-12">
<label for="title" class="form-label">标题</label>
<input type="text" class="form-control" id="title" name="title" value="" placeholder="请输入标题" />
</div>
<div class="mb-3 col-md-12">
<label for="seo_keywords" class="form-label">关键词</label>
<input type="text" class="form-control" id="seo_keywords" name="seo_keywords" value="" placeholder="关键词" />
</div>
<div class="mb-3 col-md-12">
<label for="seo_description" class="form-label">描述</label>
<textarea class="form-control" id="seo_description" name="seo_description" rows="5" value="" placeholder="描述"></textarea>
</div>
<div class="mb-3 col-md-12 position-relative">
<label for="more_pics">多图上传</label>
<div class="js-upload-images">
<div id="picker_more_pics">上传多张图片</div>
<input type="hidden" name="more_pics" data-multiple="true" data-size="2097152" data-ext='gif,jpg,jpeg,bmp,png' id="more_pics" value="">
<ul id="file_list_more_pics" class="list-inline row lyear-uploads-pic mb-0">
<li class="col-6 col-sm-3 col-md-2 list-images-item">
<figure>
<img src="images/gallery/1.jpg" />
<figcaption>
<a class="btn btn-round btn-primary btn-link-pic" href="images/gallery/1.jpg"><i class="mdi mdi-eye"></i></a>
<a class="btn btn-round btn-danger btn-remove-pic" data-id="1"><i class="mdi mdi-delete"></i></a>
</figcaption>
</figure>
</li>
<li class="col-6 col-sm-3 col-md-2 list-images-item">
<figure>
<img src="images/gallery/g-1.jpg" />
<figcaption>
<a class="btn btn-round btn-primary btn-link-pic" href="images/gallery/g-1.jpg"><i class="mdi mdi-eye"></i></a>
<a class="btn btn-round btn-danger btn-remove-pic" data-id="2"><i class="mdi mdi-delete"></i></a>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
<div class="mb-3 col-md-12">
<label for="content">内容</label>
<p class="mb-0">HTML编辑器这里就不做演示了,请自行选择HTML编辑器</p>
</div>
<div class="mb-3 col-md-12">
<label for="tags" class="form-label">标签</label>
<div class="form-controls">
<input class="js-tags-input form-control" type="text" id="tags" name="tags" value="" />
</div>
</div>
<div class="mb-3 col-md-12">
<label for="sort" class="form-label">排序</label>
<input type="text" class="form-control" id="sort" name="sort" value="0" />
</div>
<div class="mb-3 col-md-12">
<label for="status" class="form-label">状态</label>
<div class="clearfix">
<div class="form-check form-check-inline">
<input type="radio" id="statusOne" name="customRadioInline" class="form-check-input">
<label class="form-check-label" for="statusOne">禁用</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="statusTwo" name="customRadioInline" class="form-check-input" checked>
<label class="form-check-label" for="statusTwo">启用</label>
</div>
</div>
</div>
<div class="mb-3 col-md-12">
<button type="submit" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
<button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--tags插件-->
<script type="text/javascript" src="js/jquery-tagsinput/jquery.tagsinput.min.js"></script>
<!--上传插件-->
<script type="text/javascript" src="js/webuploader/webuploader.js"></script>
<!--灯箱效果插件-->
<script type="text/javascript" src="js/magnific-popup/magnific-popup.min.js"></script>
<!--通知消息插件-->
<script type="text/javascript" src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 图片上传(单张图片,多张图片)
$('.js-upload-image,.js-upload-images').each(function() {
var $input_file = $(this).find('input'),
$input_file_name = $input_file.attr('name'),
$multiple = $input_file.data('multiple'), // 是否选择多个文件
$ext = $input_file.data('ext'), // 支持的文件后缀,示例以图片为例
$size = $input_file.data('size'); // 支持最大的文件大小
var $file_list = $('#file_list_' + $input_file_name);
var ratio = window.devicePixelRatio || 1;
var thumbnailWidth = 165 * ratio;
var thumbnailHeight = 110 * ratio;
var uploader = WebUploader.create({
auto: true,
duplicate: true,
resize: false,
swf: 'js/webuploader/Uploader.swf',
server: 'http://example.itshubao.com/index/test/upload/type/webuploader',
pick: {
id: '#picker_' + $input_file_name,
multiple: $multiple
},
fileSingleSizeLimit: $size,
accept: {
title: 'Images',
extensions: $ext,
mimeTypes: 'image/*'
}
});
uploader.on('fileQueued', function(file) {
var $li = $('<li class="col-6 col-sm-3 col-md-2 list-images-item" id="' + file.id + '">' +
' <figure>' +
' <img>' +
' <figcaption>' +
' <a class="btn btn-round btn-primary btn-link-pic" href="#!"><i class="mdi mdi-eye"></i></a>' +
' <a class="btn btn-round btn-danger btn-remove-pic" href="#!"><i class="mdi mdi-delete"></i></a>' +
' </figcaption>' +
' </figure>' +
'</li>'),
$img = $li.find('img');
if ($multiple) {
$file_list.append($li);
} else {
$file_list.html($li);
$input_file.val('');
}
uploader.makeThumb(file, function(error, src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src', src);
}, thumbnailWidth, thumbnailHeight);
$('<div class="progress progress-sm"><div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div></div>').appendTo($li);
});
uploader.on('uploadProgress', function(file, percentage) {
var $percent = $('#' + file.id).find('.progress-bar');
$percent.css('width', percentage * 100 + '%');
});
uploader.on('uploadSuccess', function(file, response) {
var $li = $('#' + file.id);
if (response.status == 1) {
if ($multiple) {
if ($input_file.val()) {
$input_file.val($input_file.val() + ',' + response.id);
} else {
$input_file.val(response.id);
}
$li.find('.btn-remove-pic').attr('data-id', response.id);
} else {
$input_file.val(response.id);
}
}
$('<div class="' + response.class + ' success"></div>').text(response.info).appendTo($li);
$li.find('a.btn-link-pic').attr('href', response.path);
});
uploader.on('uploadError', function(file) {
var $li = $('#' + file.id);
$('<div class="bg-danger error">上传失败</div>').appendTo($li);
});
uploader.on('error', function(type) {
switch (type) {
case 'Q_TYPE_DENIED':
//alert('图片类型不正确,只允许上传后缀名为:' + $ext + ',请重新上传!');
showNotify('图片类型不正确,只允许上传后缀名为:' + $ext + ',请重新上传!', 'danger', 1500);
break;
case 'F_EXCEED_SIZE':
//alert('图片不得超过' + ($size / 1024) + 'kb,请重新上传!');
showNotify('图片不得超过' + ($size / 1024) + 'kb,请重新上传!', 'danger', 1500);
break;
}
});
uploader.on('uploadComplete', function(file) {
setTimeout(function() {
$('#' + file.id).find('.progress').remove();
}, 500);
});
// 删除操作
$file_list.delegate('.btn-remove-pic', 'click', function() {
if (confirm("你确认要删除该图片吗?")) { // 可改为对话框插件
if ($multiple) {
var id = $(this).data('id'),
ids = $input_file.val().split(',');
if (id) {
for (var i = 0; i < ids.length; i++) {
if (ids[i] == id) {
ids.splice(i, 1);
break;
}
}
$input_file.val(ids.join(','));
}
} else {
$input_file.val('');
}
$(this).closest('.list-images-item').remove();
}
});
// 接入图片查看插件
$(this).magnificPopup({
delegate: 'a.btn-link-pic',
type: 'image',
gallery: {
enabled: true
}
});
});
// 图片展示
jQuery('.js-gallery').each(function() {
jQuery(this).magnificPopup({
delegate: 'a.img-link',
type: 'image',
gallery: {
enabled: true
}
});
});
});
</script>
</body>
</html>
HTML
1
https://gitee.com/StoneNBS/Light-Year-Admin-Using-Iframe-v5.git
git@gitee.com:StoneNBS/Light-Year-Admin-Using-Iframe-v5.git
StoneNBS
Light-Year-Admin-Using-Iframe-v5
Light Year Admin Using Iframe v5
master

搜索帮助