更新 index.php
添加背景，利用必应的壁纸图
This commit is contained in:
parent
6079d34384
commit
63565aea78
237
index.php
237
index.php
@ -3,11 +3,11 @@ $base_dir='/o/';//以/即结束即可
|
|||||||
$user="chate.store";// 用户名
|
$user="chate.store";// 用户名
|
||||||
$pwd="123456";// 密码，请记得频繁更换
|
$pwd="123456";// 密码，请记得频繁更换
|
||||||
|
|
||||||
$auth = false;
|
$authorization = false;
|
||||||
if ($_SERVER['PHP_AUTH_USER'] == $user && $_SERVER['PHP_AUTH_PW'] == $pwd){
|
if ($_SERVER['PHP_AUTH_USER'] == $user && $_SERVER['PHP_AUTH_PW'] == $pwd){
|
||||||
$auth = true;
|
$authorization = true;
|
||||||
}
|
}
|
||||||
if(!$auth){
|
if(!$authorization){
|
||||||
// 没登录成功，弹出要求输入用户名和密码窗口
|
// 没登录成功，弹出要求输入用户名和密码窗口
|
||||||
header("WWW-Authenticate:Basic realm='Private'");
|
header("WWW-Authenticate:Basic realm='Private'");
|
||||||
header('HTTP/1.0 401 Unauthorized');
|
header('HTTP/1.0 401 Unauthorized');
|
||||||
@ -28,11 +28,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
|
|||||||
|
|
||||||
// 兼容跨平台路径
|
// 兼容跨平台路径
|
||||||
$md5 = md5_file($file_tmp);
|
$md5 = md5_file($file_tmp);
|
||||||
$dir1 = substr($md5,0,1);
|
$upload_dir = getcwd() . $base_dir . substr($md5,0,1).'/'.substr($md5,1,1);
|
||||||
$dir2 = substr($md5,1,1);
|
|
||||||
$path = getcwd();
|
|
||||||
$upload_dir = $path . $base_dir .$dir1 .'/'. $dir2;
|
|
||||||
$upload_parent_dir = $path . $base_dir .$dir1 ;
|
|
||||||
// 检查并创建目录
|
// 检查并创建目录
|
||||||
if (!is_dir($upload_dir)) {
|
if (!is_dir($upload_dir)) {
|
||||||
if (!mkdir($upload_dir, 0777, true) && !is_dir($upload_dir)) {
|
if (!mkdir($upload_dir, 0777, true) && !is_dir($upload_dir)) {
|
||||||
@ -41,9 +37,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
|
|||||||
}
|
}
|
||||||
// 开始创建index.html
|
// 开始创建index.html
|
||||||
file_put_contents($upload_dir .'/index.html', 'no access');
|
file_put_contents($upload_dir .'/index.html', 'no access');
|
||||||
if(!file_exists($upload_parent_dir. '/index.html')){
|
file_put_contents( getcwd() . $base_dir . substr($md5,0,1). '/index.html', 'no access');
|
||||||
file_put_contents( $upload_parent_dir. '/index.html', 'no access');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据文件内容生成MD5文件名，这样可以排除重复上传
|
// 根据文件内容生成MD5文件名，这样可以排除重复上传
|
||||||
@ -51,7 +45,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
|
|||||||
// 这里判断下重复文件不移动文件
|
// 这里判断下重复文件不移动文件
|
||||||
$target_file=$upload_dir . '/' .$FileName;
|
$target_file=$upload_dir . '/' .$FileName;
|
||||||
if (file_exists($target_file) || move_uploaded_file($file_tmp, $target_file)) {
|
if (file_exists($target_file) || move_uploaded_file($file_tmp, $target_file)) {
|
||||||
echo '{"upload_url":"http://'.$_SERVER['HTTP_HOST'] . $base_dir . $dir1. '/' .$dir2 .'/'. $FileName.'"}';
|
echo '{"upload_url":"http://'.$_SERVER['HTTP_HOST'] . $base_dir . substr($md5,0,1). '/' .substr($md5,1,1) .'/'. $FileName.'"}';
|
||||||
} else {
|
} else {
|
||||||
echo '{"error":"写入失败，无法保存文件"}';
|
echo '{"error":"写入失败，无法保存文件"}';
|
||||||
}
|
}
|
||||||
@ -63,9 +57,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="description" content="SIW图床-基于PHP的图床服务">
|
||||||
|
<meta name="keywords" content="SIW图床,PHP图床,图床">
|
||||||
<link rel="stylesheet" href="http://cdn.atusu.cn/202410/bootstrap.min.css">
|
<link rel="stylesheet" href="http://cdn.atusu.cn/202410/bootstrap.min.css">
|
||||||
<script src="http://cdn.atusu.cn/202410/jquery.min.js"></script>
|
<script src="http://cdn.atusu.cn/202410/jquery.min.js"></script>
|
||||||
<title>一个简单的图床</title>
|
<title>SIW图床-基于PHP的图床服务</title>
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -75,7 +71,18 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.container {
|
.background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: cover;
|
||||||
|
z-index: -1;
|
||||||
|
transition: opacity 1s ease-in-out;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@ -164,35 +171,63 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="background" id="background"></div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="card-title text-center" style="font-weight: bold;">SIW（Simple Image Web）</h4>
|
<h4 class="card-title text-center" style="font-weight: bold;">SIW（Simple Image Web）</h4>
|
||||||
<h6 class="card-title text-center" style="font-weight: bold;">简单就是美。</h6>
|
<h6 class="card-title text-center" style="font-weight: bold;">简单就是美。</h6>
|
||||||
<form id="uploadForm" enctype="multipart/form-data">
|
<form id="uploadForm" enctype="multipart/form-data">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="files" class="form-label"></label>
|
<label for="files" class="form-label"></label>
|
||||||
<input type="file" class="form-control" id="files" name="files[]" multiple accept="image/jpeg, image/png, image/gif, image/webp, image/avif" required>
|
<input type="file" class="form-control" id="files" name="files[]" multiple accept="image/jpeg, image/png, image/gif, image/webp, image/avif" required>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary w-100" style="font-weight: bold;">开始上传</button>
|
<button type="submit" class="btn btn-primary w-100" style="font-weight: bold;">开始上传</button>
|
||||||
</form>
|
</form>
|
||||||
<div id="fileList" class="file-list mt-3"></div>
|
<div id="fileList" class="file-list mt-3"></div>
|
||||||
<div id="statusOutput" class="status-output"></div>
|
<div id="statusOutput" class="status-output"></div>
|
||||||
<div class="link-output">
|
<div class="link-output">
|
||||||
<button class="btn btn-info" id="directLinkBtn">直连</button>
|
<button class="btn btn-info" id="directLinkBtn">直连</button>
|
||||||
<button class="btn btn-info" id="htmlCodeBtn">网页</button>
|
<button class="btn btn-info" id="htmlCodeBtn">网页</button>
|
||||||
<button class="btn btn-info" id="forumCodeBtn">论坛</button>
|
<button class="btn btn-info" id="forumCodeBtn">论坛</button>
|
||||||
<button class="btn btn-info" id="markDownCodeBtn">Markdown</button>
|
<button class="btn btn-info" id="markDownCodeBtn">Markdown</button>
|
||||||
<button class="btn btn-success" id="copyAllBtn">复制所有链接</button>
|
<button class="btn btn-success" id="copyAllBtn">复制所有链接</button>
|
||||||
<textarea id="linkText" readonly></textarea>
|
<textarea id="linkText" readonly></textarea>
|
||||||
</div>
|
</div>
|
||||||
<h6 id="formatHint" class="card-title text-center">支持格式: JPEG, PNG, GIF, WEBP, AVIF 最大上传：<?php echo ini_get('upload_max_filesize');?></h6>
|
<h6 id="formatHint" class="card-title text-center">支持格式: JPEG, PNG, GIF, WEBP, AVIF 最大上传：<?php echo ini_get('upload_max_filesize');?></h6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
async function setBackgroundImages() {
|
||||||
|
const images = ['https://cn.bing.com/th?id=OHR.SnowMoose_EN-US6949674639_1920x1080.jpg','https://cn.bing.com/th?id=OHR.IcebergsAntarctica_EN-US6829804691_1920x1080.jpg','https://cn.bing.com/th?id=OHR.KilchurnAutumn_EN-US6737063910_1920x1080.jpg','https://cn.bing.com/th?id=OHR.MtStMichel_EN-US6641012356_1920x1080.jpg','https://cn.bing.com/th?id=OHR.TomTurkeys_EN-US6212893518_1920x1080.jpg'];
|
||||||
|
const backgroundDiv = document.getElementById('background');
|
||||||
|
if (images.length > 0) {
|
||||||
|
backgroundDiv.style.backgroundImage = 'url(' + images[0] + ')';
|
||||||
|
}
|
||||||
|
let index = 0;
|
||||||
|
let currentBackgroundDiv = backgroundDiv;
|
||||||
|
setInterval(() => {
|
||||||
|
const nextIndex = (index + 1) % images.length;
|
||||||
|
const nextBackgroundDiv = document.createElement('div');
|
||||||
|
nextBackgroundDiv.className = 'background next';
|
||||||
|
nextBackgroundDiv.style.backgroundImage = 'url(' + images[nextIndex] + ')';
|
||||||
|
document.body.appendChild(nextBackgroundDiv);
|
||||||
|
nextBackgroundDiv.style.opacity = 0;
|
||||||
|
setTimeout(() => {
|
||||||
|
nextBackgroundDiv.style.opacity = 1;
|
||||||
|
}, 50);
|
||||||
|
setTimeout(() => {
|
||||||
|
document.body.removeChild(currentBackgroundDiv);
|
||||||
|
currentBackgroundDiv = nextBackgroundDiv;
|
||||||
|
index = nextIndex;
|
||||||
|
}, 1000);
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
setBackgroundImages();// 设置背景
|
||||||
// 初始化时显示格式提示
|
// 初始化时显示格式提示
|
||||||
$('#formatHint, #serverWarning, #navLinks').show();
|
$('#formatHint, #serverWarning, #navLinks').show();
|
||||||
|
|
||||||
@ -251,74 +286,74 @@ $(document).ready(function () {
|
|||||||
var fileIndex = 0;
|
var fileIndex = 0;
|
||||||
function uploadNextFile() {
|
function uploadNextFile() {
|
||||||
if (fileIndex < files.length) {
|
if (fileIndex < files.length) {
|
||||||
var formData = new FormData();
|
var formData = new FormData();
|
||||||
formData.append('file', files[fileIndex]);
|
formData.append('file', files[fileIndex]);
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open("POST", '', true);
|
xhr.open("POST", '', true);
|
||||||
var startTime;
|
var startTime;
|
||||||
xhr.upload.addEventListener('progress', function (evt) {
|
xhr.upload.addEventListener('progress', function (evt) {
|
||||||
if (evt.lengthComputable) {
|
if (evt.lengthComputable) {
|
||||||
if (!startTime) startTime = new Date();
|
if (!startTime) startTime = new Date();
|
||||||
var percentComplete = Math.round((evt.loaded / evt.total) * 100);
|
var percentComplete = Math.round((evt.loaded / evt.total) * 100);
|
||||||
var elapsedTime = (new Date() - startTime) / 1000;
|
var elapsedTime = (new Date() - startTime) / 1000;
|
||||||
var speed = (evt.loaded / 1024 / 1024) / elapsedTime;
|
var speed = (evt.loaded / 1024 / 1024) / elapsedTime;
|
||||||
var fileRow = $('#file-row-' + fileIndex);
|
var fileRow = $('#file-row-' + fileIndex);
|
||||||
fileRow.find('.progress-status').text(` ${speed.toFixed(2)} MB/s`);
|
fileRow.find('.progress-status').text(` ${speed.toFixed(2)} MB/s`);
|
||||||
fileRow.find('.progress').show();
|
fileRow.find('.progress').show();
|
||||||
fileRow.find('.progress-bar').css('width', percentComplete + '%').text(percentComplete + '%');
|
fileRow.find('.progress-bar').css('width', percentComplete + '%').text(percentComplete + '%');
|
||||||
var container = $('#fileList');
|
var container = $('#fileList');
|
||||||
var targetRow = $('#file-row-' + fileIndex);
|
var targetRow = $('#file-row-' + fileIndex);
|
||||||
var targetTop = targetRow[0].offsetTop;
|
var targetTop = targetRow[0].offsetTop;
|
||||||
var containerHeight = container.height();
|
var containerHeight = container.height();
|
||||||
var rowHeight = targetRow.outerHeight();
|
var rowHeight = targetRow.outerHeight();
|
||||||
var scrollTo = targetTop - (containerHeight / 1) + (rowHeight / 2);
|
var scrollTo = targetTop - (containerHeight / 1) + (rowHeight / 2);
|
||||||
scrollTo = Math.max(0, Math.min(scrollTo, container[0].scrollHeight - containerHeight));
|
scrollTo = Math.max(0, Math.min(scrollTo, container[0].scrollHeight - containerHeight));
|
||||||
container.stop().animate({ scrollTop: scrollTo }, 200);
|
container.stop().animate({ scrollTop: scrollTo }, 200);
|
||||||
if (percentComplete === 100) {
|
if (percentComplete === 100) {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
if (xhr.readyState !== XMLHttpRequest.DONE) {
|
if (xhr.readyState !== XMLHttpRequest.DONE) {
|
||||||
fileRow.find('.progress-status').text('处理中请稍等');
|
fileRow.find('.progress-status').text('处理中请稍等');
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, false);
|
}, false);
|
||||||
xhr.onreadystatechange = function () {
|
xhr.onreadystatechange = function () {
|
||||||
if (xhr.readyState === XMLHttpRequest.DONE) {
|
if (xhr.readyState === XMLHttpRequest.DONE) {
|
||||||
var fileRow = $('#file-row-' + fileIndex);
|
var fileRow = $('#file-row-' + fileIndex);
|
||||||
if (xhr.status === 200) {
|
if (xhr.status === 200) {
|
||||||
var result = JSON.parse(xhr.responseText);
|
var result = JSON.parse(xhr.responseText);
|
||||||
if (result.upload_url) {
|
if (result.upload_url) {
|
||||||
uploadedLinks.push(result.upload_url);
|
uploadedLinks.push(result.upload_url);
|
||||||
fileRow.find('.progress-status').text('处理完成');
|
fileRow.find('.progress-status').text('处理完成');
|
||||||
fileRow.find('.progress').hide();
|
fileRow.find('.progress').hide();
|
||||||
var linkHtml = `
|
var linkHtml = `
|
||||||
<a href="${result.upload_url}" target="_blank" class="btn btn-info btn-download">预览</a>
|
<a href="${result.upload_url}" target="_blank" class="btn btn-info btn-download">预览</a>
|
||||||
<button class="btn btn-success btn-copy copyButton" data-url="${result.upload_url}">复制</button>
|
<button class="btn btn-success btn-copy copyButton" data-url="${result.upload_url}">复制</button>
|
||||||
`;
|
`;
|
||||||
fileRow.append(linkHtml);
|
fileRow.append(linkHtml);
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
fileRow.find('.progress-status').text('成功上传');
|
fileRow.find('.progress-status').text('成功上传');
|
||||||
}, 100);
|
}, 100);
|
||||||
showLinkOutput();
|
showLinkOutput();
|
||||||
} else if (result.error) {
|
} else if (result.error) {
|
||||||
fileRow.find('.progress-status').text('上传失败: ' + result.error);
|
fileRow.find('.progress-status').text('上传失败: ' + result.error);
|
||||||
$('#statusOutput').text('上传中断: ' + result.error);
|
$('#statusOutput').text('上传中断: ' + result.error);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
fileRow.find('.progress-status').text('错误信息: ' + xhr.statusText);
|
fileRow.find('.progress-status').text('错误信息: ' + xhr.statusText);
|
||||||
$('#statusOutput').text('上传中断: ' + xhr.statusText);
|
$('#statusOutput').text('上传中断: ' + xhr.statusText);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
fileIndex++;
|
fileIndex++;
|
||||||
uploadNextFile();
|
uploadNextFile();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
xhr.send(formData);
|
xhr.send(formData);
|
||||||
} else {
|
} else {
|
||||||
$('#statusOutput').text('上传任务操作完成');
|
$('#statusOutput').text('上传任务操作完成');
|
||||||
$('#files').val(''); // 清空文件选择
|
$('#files').val(''); // 清空文件选择
|
||||||
}
|
}
|
||||||
$('#statusOutput').text(`当前状态: 正在上传 ${files[fileIndex].name}`);
|
$('#statusOutput').text(`当前状态: 正在上传 ${files[fileIndex].name}`);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user