网站实现上传下载文件

2024-01-01 17:19:02

网站实现上传文件功能

前言：

想将云服务器当作云盘来使用，极简。 wordpress一键部署的网站 总共三步：前端文件download.html，后端文件upload.php，目录名images。

下方举例用的“示例图片.jpg”，记得修改为你自己放进去的文件。非浏览器可显示的文件可以把download属性删掉，算是稍微简化一下。

1、前端代码（HTML + JavaScript）

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>

2、后端代码（PHP）

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 '没有选择文件！';
}
?>

3、在同目录下建一个images文件夹用来存放文件

访问网址后面添加/download.html，示例：

https://ip地址/download.html

有什么好点子欢迎大家交流，互相学习

完善：

2023.12.30遍历文件名


使用的时候才察觉到无法显示目录下的文件内容，我不可能每次上传文件后都去手动添加一条下载链接；

添加了背景图片，同时添加文字背景以不被背景色干扰；

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，背景和文字背景暂时有点鸡肋，有没有什么其它功能和我交流交流呀

免责声明

注意：此代码示例仅用于演示目的，并可能存在安全风险。在实际应用中，您需要添加更多的安全验证和检查来防止潜在的攻击。

文章来源:https://blog.csdn.net/Aikri/article/details/135306829
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。