Embedded Files
ACRESCENTAR SEMPRE AO LINK /?=-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Management</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
textarea {
width: 100%;
height: 200px;
margin-top: 10px;
}
button {
margin: 5px 0;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>File Management</h1>
<!-- Input for Download -->
<label for="fileUrl">Enter PDF URL to download:</label>
<input type="text" id="fileUrl" placeholder="https://example.com/file.pdf">
<button id="downloadBtn">Download PDF</button>
<!-- Upload Area -->
<h2>Upload and View File</h2>
<input type="file" id="fileInput" accept=".txt,.pdf">
<button id="uploadBtn">Upload and Display</button>
<textarea id="fileContent" placeholder="File content will appear here..."></textarea>
<script>
// Download PDF
document.getElementById('downloadBtn').addEventListener('click', () => {
const fileUrl = document.getElementById('fileUrl').value;
if (!fileUrl.endsWith('.pdf')) {
alert('Please enter a valid PDF URL.');
return;
}
const link = document.createElement('a');
link.href = fileUrl;
link.download = fileUrl.split('/').pop();
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
// Upload and Display File Content
document.getElementById('fileInput').addEventListener('change', async (event) => {
const file = event.target.files[0];
if (!file) {
alert('No file selected.');
return;
}
const reader = new FileReader();
reader.onload = (e) => {
document.getElementById('fileContent').value = e.target.result;
};
if (file.type === "application/pdf") {
alert("PDF files cannot be displayed as text directly. Upload a .txt file to view content.");
return;
}
reader.readAsText(file);
});
</script>
</body>
</html>
Page updated
Google Sites
Report abuse