Вопрос или проблема
Я не знаю HTML/Javascript, но ищу самый простой index.html, который позволит мне выбрать локальный файл для загрузки в (корневую) папку на этом сайте (обслуживаемом встроенным HTTP-сервером MobaXterm) и также показать существующие файлы в этой папке для загрузки. Ничего более сложного. Может кто-нибудь помочь?
.
Ответ или решение
Для создания простого веб-приложения, которое позволяет загружать и скачивать файлы через HTTP-сервер, встроенный в MobaXterm, вам потребуется сам файл index.html, образующий основную структуру. Ниже представлена пошаговая инструкция по созданию такого файла, а также его код.
Структура проекта
-
HTTP-сервер в MobaXterm: Убедитесь, что встроенный HTTP-сервер в MobaXterm запущен и указывает на нужную директорию, куда будут загружаться файлы.
-
Создайте HTML-файл: Откройте текстовый редактор и создайте файл с именем
index.html.
Код для index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Загрузка и скачивание файлов</title>
<style>
body { font-family: Arial, sans-serif; }
h1 { text-align: center; }
.container { width: 50%; margin: auto; }
input[type="file"] { margin: 10px 0; }
ul { list-style-type: none; }
</style>
</head>
<body>
<div class="container">
<h1>Файловый менеджер</h1>
<form id="upload-form" enctype="multipart/form-data">
<input type="file" id="file-input" name="file" required>
<button type="submit">Загрузить файл</button>
</form>
<h2>Существующие файлы:</h2>
<ul id="file-list"></ul>
</div>
<script>
// Функция загрузки файлов
document.getElementById('upload-form').onsubmit = function(e) {
e.preventDefault();
var formData = new FormData();
var fileInput = document.getElementById('file-input');
formData.append('file', fileInput.files[0]);
fetch('upload.php', {
method: 'POST',
body: formData
}).then(response => response.text()).then(data => {
alert(data);
fileInput.value = ''; // очищаем input после загрузки
loadFiles(); // обновляем список файлов
}).catch(error => {
console.error('Ошибка:', error);
});
};
// Функция для загрузки списка файлов
function loadFiles() {
fetch('files.php')
.then(response => response.json())
.then(data => {
const fileList = document.getElementById('file-list');
fileList.innerHTML = ''; // очищаем список перед обновлением
data.forEach(file => {
const li = document.createElement('li');
li.innerHTML = `<a href="${file}" download>${file}</a>`;
fileList.appendChild(li);
});
})
.catch(error => {
console.error('Ошибка загрузки файлов:', error);
});
}
// Загружаем файлы при загрузке страницы
loadFiles();
</script>
</body>
</html>Дополнительные файлы
Для корректной работы функционала загрузки и скачивания файлов, вам необходимо создать два PHP-скрипта: upload.php и files.php.
1. upload.php
Этот скрипт будет обрабатывать загрузку файлов:
<?php
$target_dir = "./"; // Папка для загрузки файлов
$target_file = $target_dir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
echo "Файл ". htmlspecialchars(basename($_FILES["file"]["name"])). " был загружен.";
} else {
echo "Извините, произошла ошибка при загрузке вашего файла.";
}
?>2. files.php
Этот скрипт будет возвращать список существующих файлов:
<?php
$files = array_diff(scandir('./'), array('.', '..'));
echo json_encode(array_values($files));
?>Настройка MobaXterm
- Запустите MobaXterm.
- Откройте встроенный HTTP сервер с нужной папкой, где находятся ваши файлы
index.html,upload.php, иfiles.php. - Перейдите по адресу, предоставленному сервером (обычно http://localhost:8080/), чтобы открыть ваше веб-приложение.
Заключение
С данными файлами вы сможете загружать файлы в корневую директорию вашего HTTP-сервера, а также просматривать и скачивать существующие файлы. Эта простая система управления файлами позволит вам начать работать с загрузкой и скачиванием файлов без необходимости глубоких знаний в программировании.