@@ -58,8 +57,8 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
var upload_base_path = axupimgs.images_upload_base_path;
//为列表添加排序
function reSort() {
- document.querySelectorAll('#file_list li').forEach((el,i) => {
- el.setAttribute('data-num',i);
+ document.querySelectorAll('#file_list li').forEach((el, i) => {
+ el.setAttribute('data-num', i);
});
}
function isFileImage(file) {
@@ -86,9 +85,9 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
//reSort();
}
//清空列表
- document.querySelector('#topbar .removeall').addEventListener('click',() => {
+ document.querySelector('#topbar .removeall').addEventListener('click', () => {
axupimgs.res=[]
- document.querySelectorAll('#file_list li').forEach((el,i) => {
+ document.querySelectorAll('#file_list li').forEach((el, i) => {
el.parentNode.removeChild(el)
});
});
@@ -125,7 +124,7 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
}
});
//添加文件
- document.querySelector('#topbar .addfile').addEventListener('click',() => {
+ document.querySelector('#topbar .addfile').addEventListener('click', () => {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('multiple', 'multiple');
@@ -144,7 +143,7 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
file_i=0;
document.querySelector('#topbar .upall').innerText='全部上传';
//返回
- axupimgs.res.forEach((v,k) => {
+ axupimgs.res.forEach((v, k) => {
let addonHTML = `
`;
window.opener.CKEDITOR.instances[""].insertHtml(addonHTML);
})
@@ -157,7 +156,7 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
} else {
blobInfo.file=axupimgs.res[n].file;
blobInfo.isWater = document.querySelector('#isWater').checked;
- upload_handler(blobInfo,function(url) {
+ upload_handler(blobInfo, function(url) {
if (upload_base_path) {
if (upload_base_path.slice(-1)=='/' && url.substr(0,1)=='/') {
url = upload_base_path + url.slice(1);
@@ -183,27 +182,27 @@ include(DEDEDATA.'/mark/inc_photowatermark_config.php');
});
}
}
- document.querySelector('#topbar .upall').addEventListener('click',(e) => {
+ document.querySelector('#topbar .upall').addEventListener('click', (e) => {
if (e.target.innerText!='全部上传') {
return false;
}
if (axupimgs.res.length > 0) {
- document.querySelectorAll('#file_list li.up-no').forEach((el,i) => {
+ document.querySelectorAll('#file_list li.up-no').forEach((el, i) => {
el.classList ? el.classList.add('up-now') : el.className+=' up-now';
});
e.target.innerText='上传中';
upAllFiles(0);
}
});
- var observ_flist = new MutationObserver( (muList,observe) => {
+ var observ_flist = new MutationObserver( (muList, observe) => {
if (muList[0].addedNodes.length > 0) {
muList[0].addedNodes.forEach((el) => {
- el.querySelector('.remove').addEventListener('click',(e) => {
+ el.querySelector('.remove').addEventListener('click', (e) => {
var li = e.target.parentNode.parentNode;
var n = li.getAttribute('data-num');
var el = document.querySelectorAll('#file_list li')[n];
el.parentNode.removeChild(el);
- axupimgs.res.splice(n,1);
+ axupimgs.res.splice(n, 1);
});
});
}
diff --git a/src/static/web/css/admin.css b/src/static/web/css/admin.css
index 4e92a324..c2e09b2e 100644
--- a/src/static/web/css/admin.css
+++ b/src/static/web/css/admin.css
@@ -151,6 +151,20 @@ table,input,select,textarea,.login-box,.menu-body,.coolbg,.mysource,.mywriter,.p
.btn+.btn{margin-left:10px}
.btn-version{float:left;margin-top:18px;margin-left:5px}
#validateimg{border-radius:0 0.5rem 0.5rem 0;cursor:pointer}
+#wrap{padding:10px}
+#topbar{padding:10px 0;border-bottom:1px solid #ccc;text-align:right}
+#file_list{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding-top:10px}
+#file_list:empty:after{content:'拖拽图片到此处上传'}
+#file_list li{display:block;position:relative;padding:10px;vertical-align:top;border-radius:0.5rem}
+#file_list li:hover{background:#f5f5f5}
+#file_list li .picbox{display:flex;flex:0 0 auto;position:relative;padding-top:90%;width:100%;align-items:center;justify-content:center;overflow:hidden}
+#file_list li .picbox img{display:block;max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);border-radius:0.5rem}
+#file_list li .namebox{display:flex;padding:10px;justify-content:center;align-items:flex-start}
+#file_list li.up-over .picbox:after{position:absolute;bottom:10px;right:0;font-family:'FontAwesome';font-size:18px;color:#1eb867;content:'\f058';z-index:9}
+#file_list li .tools{display:none;position:absolute;bottom:12px;right:10px;z-index:99}
+#file_list li:hover .tools{display:block}
+#file_list li .tools .remove{cursor:pointer}
+#file_list li .tools .remove:after{font-family:'FontAwesome';font-size:18px;color:#dc3545;content:'\f1f8'}
#selColor{padding:5px;width:35px}
#edsta{display:none;padding:0.5rem;position:absolute;top:100px;left:200px;width:450px;height:auto;background:#f5f5f5;border:1px solid #dee2e6}
#browsehappy{padding:1rem 30px;color:#856404;background:#fff3cd}