Как сделать upload файла

Question

Как сделать upload файла

Влад Гроза Гроза Ученик (161), на голосовании 2 месяца назад

У меня есть код-

Как вместо test.pdf сделать upload pdf файла?Или можно по другому?

Answer 1

Чтобы добавить возможность загрузки PDF-файла и его отображения на веб-странице, можно использовать элемент `<input type="file">` для выбора файла и JavaScript для отображения выбранного файла в элементе `<embed>`. Вот пример кода, который демонстрирует, как это сделать:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Загрузка и отображение PDF</title>
</head>
<body>
<input type="file" id="fileInput" accept="application/pdf">
<embed id="pdfViewer" type="application/pdf" width="1024" height="600">

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target .files[0];
if (file && file.type === 'application/pdf') {
const fileURL = URL.createObjectURL(file);
document.getElementById('pdfViewer').src = fileURL;
} else {
alert('Пожалуйста, выберите PDF файл.');
}
});
</script>
</body>
</html>
```

В этом коде:

1. Элемент `<input type="file">` позволяет пользователю выбрать файл на своем устройстве.
2. Когда пользователь выбирает файл, срабатывает событие `change`, и функция JavaScript получает выбранный файл.
3. Если выбранный файл является PDF, создается URL для временного доступа к файлу с помощью `URL.createObjectURL`.
4. Этот URL назначается атрибуту `src` элемента `<embed>`, что позволяет отображать выбранный PDF-файл на странице.

Этот подход позволяет пользователю загружать и просматривать PDF-файлы без необходимости предварительно загружать их на сервер.