<!DOCTYPE html>
<html lang=“zh-CN”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>本地
文件内容拼接工具</title>
<style>
* {
box-sizing
: border-box;
margin
: 0;
padding
: 0;
font-family
: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color
: #f5f7fa;
color
: #333;
line-height
: 1.6;
padding
: 20px;
max-width
: 1000px;
margin
: 0 auto;
}
header {
t
ext-align
: center;
margin-bottom
: 30px;
padding
: 20px 0;
border-bottom
: 1px solid #e1e4e8;
}
h1 {
color
: #2c3e50;
margin-bottom
: 10px;
}
.container {
display
: flex;
flex-direction
: column;
gap
: 25px;
}
.card {
background
: white;
border-radius
: 10px;
box-shadow
: 0 4px 12px rgba(0, 0, 0, 0.1);
padding
: 25px;
}
h2 {
color
: #3498db;
margin-bottom
: 15px;
font-size
: 1.5rem;
}
.drop-area {
border
: 2px dashed #bdc3c7;
border-radius
: 8px;
padding
: 30px;
t
ext-align
: center;
transition
: all 0.3s ease;
background-color
: #f8f9fa;
margin-bottom
: 20px;
}
.drop-area
:hover, .drop-area.active {
border-color
: #3498db;
background-color
: #ebf5fb;
}
.
file-picker {
display
: block;
margin
: 0 auto 15px;
padding
: 10px 20px;
background-color
: #3498db;
color
: white;
border
: none;
border-radius
: 4px;
cursor
: pointer;
font-size
: 1rem;
transition
: background-color 0.2s;
}
.
file-picker
:hover {
background-color
: #2980b9;
}
.
file-list {
margin-top
: 20px;
}
.
file-item {
display
: flex;
align-items
: center;
padding
: 12px;
background
: #f8f9fa;
border-radius
: 5px;
margin-bottom
: 10px;
transition
: transform 0.2s;
}
.
file-item
:hover {
background
: #ebf5fb;
transform
: translateY(-2px);
}
.
file-name {
flex-grow
: 1;
overflow
: hidden;
t
ext-overflow
: ellipsis;
white-space
: nowrap;
font-size
: 0.95rem;
}
.
file-size {
color
: #7f8c8d;
font-size
: 0.85rem;
margin-right
: 15px;
min-width
: 60px;
t
ext-align
: right;
}
.remove-btn {
background
: none;
border
: none;
color
: #e74c3c;
cursor
: pointer;
font-size
: 1.2rem;
}
.remove-btn
:hover {
color
: #c0392b;
}
.action-buttons {
display
: flex;
gap
: 15px;
margin-top
: 20px;
justify-content
: center;
}
.btn {
padding
: 10px 20px;
border
: none;
border-radius
: 4px;
cursor
: pointer;
font-size
: 1rem;
transition
: all 0.2s ease;
}
.btn-primary {
background-color
: #3498db;
color
: white;
}
.btn-primary
:hover {
background-color
: #2980b9;
}
.btn-success {
background-color
: #2ecc71;
color
: white;
}
.btn-success
:hover {
background-color
: #27ae60;
}
.btn-secondary {
background-color
: #95a5a6;
color
: white;
}
.btn-secondary
:hover {
background-color
: #7f8c8d;
}
.btn
:disabled {
background-color
: #bdc3c7;
cursor
: not-allowed;
}
.results {
display
: none;
}
t
extarea {
width
: 100%;
height
: 300px;
padding
: 15px;
border
: 1px solid #ddd;
border-radius
: 4px;
font-family
: monospace;
font-size
: 0.9rem;
resize
: vertical;
margin-bottom
: 15px;
}
.
file-counter {
t
ext-align
: center;
font-size
: 0.9rem;
color
: #7f8c8d;
margin-bottom
: 15px;
}
footer {
t
ext-align
: center;
margin-top
: 30px;
padding-top
: 20px;
color
: #7f8c8d;
font-size
: 0.9rem;
border-top
: 1px solid #e1e4e8;
}
.status {
t
ext-align
: center;
font-weight
: bold;
min-height
: 24px;
margin-top
: 10px;
}
</style>
</head>
<body>
<header>
<h1>本地
文件内容拼接工具</h1>
<p>选择多个文本
文件并将它们的内容合并成一个
文件</p>
</header>
<div class="container">
<div class="card">
<h2>1. 选择
文件</h2>
<div class="drop-area" id="dropZone">
<p>拖放
文件到此处 或</p>
<input type="
file" id="
fileInput" multiple class="
file-picker" accept=".txt,.t
ext,.csv,.log,.js,.html,.css,.json">
</div>
<div class="
file-counter">
已选择
文件: <span id="
fileCount">0</span>
</div>
<div class="
file-list" id="
fileList"></div>
<div class="action-buttons">
<button id="clearBtn" class="btn btn-secondary" disabled>
清空列表</button>
</div>
</div>
<div class="card results" id="resultsSection">
<h2>2. 拼接结果</h2>
<t
extarea id="output" readonly placeholder="拼接后的内容将显示在这里..."></t
extarea>
<div class="action-buttons">
<button id="downloadBtn" class="btn btn-success" disabled>下载合并
文件</button>
<button id="copyBtn" class="btn btn-primary" disabled>复制到剪贴板</button>
</div>
</div>
<div class="status" id="status"></div>
</div>
<footer>
<p>注意
: 此应用在浏览器中运行，不会将
文件上传到任何服务器</p>
<p>© 2023 本地
文件拼接工具</p>
</footer>
<script>
//
文件管理
let
files = [];
const dropZone = document.getElementById('dropZone');
const
fileInput = document.getElementById('
fileInput');
const
fileList = document.getElementById('
fileList');
const
fileCount = document.getElementById('
fileCount');
const clearBtn = document.getElementById('clearBtn');
const resultsSection = document.getElementById('resultsSection');
const output = document.getElementById('output');
const downloadBtn = document.getElementById('downloadBtn');
const copyBtn = document.getElementById('copyBtn');
const status = document.getElementById('status');
// 更新
文件列表显示
function update
FileList() {
fileList.innerHTML = '';
fileCount.t
extContent =
files.length;
clearBtn.disabled =
files.length === 0;
copyBtn.disabled = true;
downloadBtn.disabled = true;
if (
files.length === 0) {
resultsSection.style.display = 'none';
return;
}
files.forEach((
file, index) => {
const item = document.createElement('div');
item.className = '
file-item';
//
文件大小格式处理
const
fileSize =
file.size;
let sizeT
ext;
if (
fileSize < 1024) {
sizeT
ext = `${
fileSize} B`;
} else if (
fileSize < 1024 * 1024) {
sizeT
ext = `${(
fileSize / 1024).toFixed(1)} KB`;
} else {
sizeT
ext = `${(
fileSize / (1024 * 1024)).toFixed(1)} MB`;
}
item.innerHTML = `
<div class="
file-name">${
file.name}</div>
<div class="
file-size">${sizeT
ext}</div>
<button class="remove-btn" data-index="${index}">✕</button>
`;
fileList.appendChild(item);
});
}
// 添加
文件到列表
function add
Files(new
Files) {
const valid
Files = Array.from(new
Files).filter(
file => {
// 验证是否为文本
文件
const mimeTypes = [
't
ext/plain',
't
ext/html',
't
ext/css',
't
ext/javascript',
'application/json',
'java'
];
return mimeTypes.some(type =>
file.type.startsWith(type)) ||
['.txt', '.log', '.csv', '.js', '.html', '.css', '.json','.java'].some(
ext =>
file.name.endsWith(
ext));
});
// 过滤掉重复
文件
valid
Files.forEach(
file => {
if (!
files.some(f => f.name ===
file.name && f.size ===
file.size && f.lastModified ===
file.lastModified)) {
files.push(
file);
}
});
update
FileList();
status.t
extContent = `添加了 ${valid
Files.length} 个
文件`;
}
// 拼接
文件内容
async function concat
Files() {
if (
files.length === 0) {
output.value = '';
return;
}
status.t
extContent = '正在读取并拼接
文件...';
try {
const contentArray = [];
// 按顺序读取每个
文件
for (const
file of
files) {
const content = await read
FileAsT
ext(
file);
contentArray.push(content);
}
// 拼接所有内容
const concatedContent = contentArray.join('\n\n');
output.value = concatedContent;
resultsSection.style.display = 'block';
copyBtn.disabled = false;
downloadBtn.disabled = false;
status.t
extContent = '
文件拼接完成!';
} catch (error) {
console.error('读取
文件出错
:', error);
output.value = '';
status.t
extContent = `错误
: ${error.message}`;
}
}
// 读取
文件内容为文本
function read
FileAsT
ext(
file) {
return new Promise((resolve, reject) => {
const reader = new
FileReader();
reader.onload = event => {
resolve(event.target.result);
};
reader.onerror = () => {
reject(new Error(`无法读取
文件: ${
file.name}`));
};
reader.readAsT
ext(
file);
});
}
// 下载合并后的
文件
function downloadConcated
File() {
const blob = new Blob([output.value], { type
: 't
ext/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'concated-
file.txt';
document.body.appendChild(a);
a.click();
// 清理
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
status.t
extContent = '
文件下载完成';
}, 100);
}
// 复制文本到剪贴板
function copyToClipboard() {
output.select();
document.execCommand('copy');
// 显示提示
status.t
extContent = '内容已复制到剪贴板';
setTimeout(() => {
status.t
extContent = '';
}, 2000);
}
// 事件监听器
fileInput.addEventListener('change', (e) => {
add
Files(e.target.
files);
concat
Files();
});
// 拖放区域事件
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('active');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('active');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('active');
if (e.dataTransfer.
files.length > 0) {
add
Files(e.dataTransfer.
files);
concat
Files();
}
});
// 点击空白处关闭拖放高亮
document.addEventListener('dragleave', (e) => {
if (!dropZone.contains(e.relatedTarget)) {
dropZone.classList.remove('active');
}
}, true);
// 移除
文件
fileList.addEventListener('click', (e) => {
if (e.target.classList.contains('remove-btn')) {
const index = parseInt(e.target.getAttribute('data-index'));
files.splice(index, 1);
update
FileList();
concat
Files();
status.t
extContent = '
文件已移除';
}
});
//
清空列表
clearBtn.addEventListener('click', () => {
files = [];
update
FileList();
output.value = '';
status.t
extContent = '
文件列表已
清空';
});
// 拼接
文件按钮
downloadBtn.addEventListener('click', downloadConcated
File);
copyBtn.addEventListener('click', copyToClipboard);
// 初始化
update
FileList();
</script>
</body>
</html>拼接加入
文件名
本文介绍了一种特殊的方法来解决使用inputType:'file'时，通过form.reset()无法清除文件路径的问题，并给出了获取文件路径的正确方式。
扫一扫
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
