一.效果展示
1.实际效果如图：
二.源码分享
1.源码目录如下：
- sc.py
- templates/
- index.html
- upload_success.html2.使用方法:
pip install flask进入目录运行sc.py:
2.源码内容如下：
1.sc.py:
from flask import Flask, render_template, request, send_from_directory, url_for
import os
import random
import string
app = Flask(__name__)
UPLOAD_FOLDER = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'uploads')
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
def generate_random_string(length=3):
letters = string.ascii_letters + string.digits
return ''.join(random.choice(letters) for _ in range(length))
@app.route('/')
def index():
return render_template('index.html')
@app.route('/upload', methods=['POST'])
def upload_file():
if 'file' not in request.files:
return 'No file part'
file = request.files['file']
if file.filename == '':
return 'No selected file'
if file:
filename = generate_random_string() + '_' + file.filename
filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
if not os.path.exists(app.config['UPLOAD_FOLDER']):
os.makedirs(app.config['UPLOAD_FOLDER'])
file.save(filepath)
#本地电脑使用将"https://yourdomain.com/"替换为"https://127.0.0.1/"即可
download_link = "https://yourdomain.com/"+ filename
return render_template('upload_success.html', download_link=download_link)
@app.route('/<filename>')
def download_file(filename):
return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
if __name__ == '__main__':
app.run('0.0.0.0', 80)
2.index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="page-title">请先上传文件</title>
<!-- 使用Bootstrap样式 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
input[type="file"] {
margin-top: 5px;
padding: 10px; /* 添加按钮的内边距 */
border: 1px solid #ced4da; /* 添加按钮的边框 */
border-radius: 5px; /* 添加按钮的边框圆角 */
background-color: #f8f9fa; /* 添加按钮的背景色 */
width: 100%; /* 设置按钮宽度为父元素宽度 */
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f8f9fa;
margin: 0;
}
header {
position: fixed;
top: 40px;
left: 50%; /* Center the header */
transform: translateX(-50%); /* Center the header */
width: 350px; /* Set a specific width */
padding: 10px;
background-color: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
text-align: center;
color: #007bff;
}
.upload-form {
width: 500px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #007bff;
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input[type="file"] {
margin-top: 5px;
}
input[type="submit"] {
margin-top: 10px;
}
nav {
position: fixed;
top: 0;
right: 0;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>文件转链接</h1>
</header>
<nav>
<label for="theme-select" id="theme-label">主题：</label>
<select id="theme-select">
<option value="light" id="light-option">白天</option>
<option value="dark" id="dark-option">黑夜</option>
<option value="blue" id="blue-option">浅蓝</option>
</select>
<label for="language-select" id="language-label">语言：</label>
<select id="language-select">
<option value="zh-CN" id="zh-CN-option">中文简体</option>
<option value="zh-TW" id="zh-TW-option">中文繁体</option>
<option value="en" id="en-option">英文</option>
</select>
</nav>
<div class="upload-form">
<h1 id="upload-title">请先上传文件</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="file" id="file-label">选择一个文件:</label>
<input type="file" class="form-control-file" name="file" id="file" required>
</div>
<button type="submit" class="btn btn-primary btn-block" id="submit-button">上传</button>
</form>
</div>
<!-- 使用Bootstrap的JavaScript和jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
// 添加主题和语言切换的脚本
document.getElementById('theme-select').addEventListener('change', function() {
document.body.style.backgroundColor = this.value === 'dark' ? '#343a40' : (this.value === 'blue' ? '#e7f0f9' : '#f8f9fa');
});
document.getElementById('language-select').addEventListener('change', function() {
// 更新页面元素的语言
document.getElementById('page-title').innerText = this.value === 'zh-CN' ? '请先上传文件' :
(this.value === 'zh-TW' ? '請先上傳文件' : 'Please Upload a File');
document.getElementById('theme-label').innerText = this.value === 'zh-CN' ? '主题：' :
(this.value === 'zh-TW' ? '主題：' : 'Theme:');
document.getElementById('light-option').innerText = this.value === 'zh-CN' ? '白天' :
(this.value === 'zh-TW' ? '白天' : 'Light');
document.getElementById('dark-option').innerText = this.value === 'zh-CN' ? '黑夜' :
(this.value === 'zh-TW' ? '黑夜' : 'Dark');
document.getElementById('blue-option').innerText = this.value === 'zh-CN' ? '浅蓝' :
(this.value === 'zh-TW' ? '淺藍' : 'Blue');
document.getElementById('language-label').innerText = this.value === 'zh-CN' ? '语言：' :
(this.value === 'zh-TW' ? '語言：' : 'Language:');
document.getElementById('zh-CN-option').innerText = this.value === 'zh-CN' ? '中文简体' :
(this.value === 'zh-TW' ? '中文簡體' : 'CN(Simplified)');
document.getElementById('zh-TW-option').innerText = this.value === 'zh-CN' ? '中文繁体' :
(this.value === 'zh-TW' ? '中文繁體' : 'CN(Traditional)');
document.getElementById('en-option').innerText = this.value === 'zh-CN' ? '英文' :
(this.value === 'zh-TW' ? '英文' : 'English');
document.getElementById('upload-title').innerText = this.value === 'zh-CN' ? '请先上传文件' :
(this.value === 'zh-TW' ? '請先上傳文件' : 'Please Upload a File');
document.getElementById('file-label').innerText = this.value === 'zh-CN' ? '选择一个文件:' :
(this.value === 'zh-TW' ? '選擇一個文件:' : 'Choose a file:');
document.getElementById('submit-button').innerText = this.value === 'zh-CN' ? '上传' :
(this.value === 'zh-TW' ? '上傳' : 'Upload');
});
</script>
</body>
</html>3.upload_success.html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传成功</title>
<!-- 使用Bootstrap样式 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f8f9fa;
text-align: center;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: #007bff;
}
#copyButton {
cursor: pointer;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
p {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>文件上传成功！</h1>
<p>您的文件可以通过以下链接下载：</p>
<div class="input-group mb-3">
<input type="text" class="form-control" id="downloadLink" value="{{ download_link }}" readonly>
<div class="input-group-append">
<button class="btn btn-success" type="button" onclick="copyToClipboard()">复制链接</button>
</div>
</div>
</div>
<script>
function copyToClipboard() {
var copyText = document.getElementById("downloadLink");
copyText.select();
document.execCommand('copy');
}
</script>
<!-- 使用Bootstrap的JavaScript和jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>感兴趣的小伙伴可以试试哦，我们下期再见！！！
