想将云服务器当作云盘来使用,极简。 wordpress一键部署的网站 总共三步:前端文件download.html,后端文件upload.php,目录名images。
下方举例用的“示例图片.jpg”,记得修改为你自己放进去的文件。非浏览器可显示的文件可以把download属性删掉,算是稍微简化一下。
download.html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ?<meta charset="utf-8">
? ?<title>文件上传和下载</title>
</head>
<body>
? ?<h1>上传文件</h1>
? ?<input type="file" id="fileUpload" accept=".pdf, .doc, .docx, .txt, .md, .html, .zip, .rar, .mp4, .mp3, .jpg, .jpeg, .png">
? ?<button onclick="uploadFile()">上传</button>
? ?<h1>下载文件</h1>
<a href="/images/示例图片.jpg" download="示例图片.jpg">jk少女</a><br><br>
? ?<script>
? ? ? ?function uploadFile() {
? ? ? ? ? ?var fileInput = document.getElementById('fileUpload');
? ? ? ? ? ?var file = fileInput.files[0];
? ? ? ? ? ?var formData = new FormData();
? ? ? ? ? ?formData.append('file', file);
? ? ? ? ? ?fetch('/upload.php', {
? ? ? ? ? ? ? ?method: 'POST',
? ? ? ? ? ? ? ?body: formData
? ? ? ? ? })
? ? ? ? ? .then(response => response.text())
? ? ? ? ? .then(data => console.log(data))
? ? ? ? ? .catch(error => console.error(error));
? ? ? }
? ?</script>
</body>
</html>
upload.php
<?php
if(isset($_FILES['file'])){
? ?$file = $_FILES['file'];
? ?$fileName = $file['name'];
? ?$fileTmpName = $file['tmp_name'];
? ?$fileSize = $file['size'];
? ?$fileError = $file['error'];
? ?$fileType = $file['type'];
? ?$fileExt = pathinfo($fileName, PATHINFO_EXTENSION);
? ?
? ?// 检查文件类型和大小
? ?if ($fileError === UPLOAD_ERR_OK && $fileSize > 0 && is_string($fileExt)) {
? ? ? ?// 将文件从临时目录移动到目标目录(这里是images目录)
? ? ? ?move_uploaded_file($fileTmpName, 'images/' . $fileName);
? ? ? ?echo '文件上传成功!';
? } else {
? ? ? ?echo '文件类型或大小不正确!';
? }
} else {
? ?echo '没有选择文件!';
}
?>
访问网址后面添加/download.html,示例:
https://ip地址/download.html
有什么好点子欢迎大家交流,互相学习
使用的时候才察觉到无法显示目录下的文件内容,我不可能每次上传文件后都去手动添加一条下载链接;
添加了背景图片,同时添加文字背景以不被背景色干扰;
1、在服务器上创建一个list_files.php
文件,该文件应该返回一个JSON格式的字符串,其中包含/images
目录下的所有文件名。以下是你可以参考的list_files.php
代码:
<?php
$files = scandir('/images');
$files = array_diff($files, array('.', '..'));
echo json_encode(array_values($files));
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>文件上传和下载</title>
<!--添加文字背景-->
<style>
#fileList a {
background-color: white;
padding: 1px;
}
</style>
</head>
<body background="/images/背景2.jpg" style="background-size:100%;background-attachment: fixed;">
<h1>上传文件</h1>
<input type="file" id="fileUpload" accept=".pdf, .doc, .docx, .txt, .md, .html, .zip, .rar, .mp4, .mp3, .jpg, .jpeg, .png">
<button onclick="uploadFile()">上传</button>
<h1>下载文件</h1>
<div id="fileList"></div>
<script>
function uploadFile() {
var fileInput = document.getElementById('fileUpload');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
fetch('/upload.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
}
function listFiles() {
fetch('/list_files.php')
.then(response => response.json())
.then(data => {
var fileList = document.getElementById('fileList');
fileList.innerHTML = '';
data.forEach(function(file) {
var link = document.createElement('a');
link.href = '/images/' + file;
link.download = file;
link.innerHTML = file;
fileList.appendChild(link);
fileList.appendChild(document.createElement('br'));
});
})
.catch(error => console.error(error));
}
listFiles();
</script>
</body>
</html>
emm,背景和文字背景暂时有点鸡肋,有没有什么其它功能和我交流交流呀
注意:此代码示例仅用于演示目的,并可能存在安全风险。在实际应用中,您需要添加更多的安全验证和检查来防止潜在的攻击。