这是一个基于HTML、CSS和JavaScript的简单文件上传和展示页面的示例代码： HTML：复制 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>File Upload and Display Example</title> </head> <body> <h1>File Upload and Display Example</h1> <form id="uploadForm" action="" method="POST" enctype="multipart/form-data"> <input type="file" name="fileToUpload" id="fileToUpload" /><br /> <input type="submit" value="Upload File" name="submit" /> </form> <div id="fileDisplayArea"></div> </body> </html> CSS：复制 h1 { color: #333; font-size: 24px; font-weight: bold; margin-bottom: 20px; } #fileDisplayArea { border: 1px solid #ddd; padding: 20px; margin-top: 20px; overflow: auto; } JavaScript：复制 window.onload = function() { document.getElementById('uploadForm').addEventListener('submit', uploadFile); } function uploadFile(event) { event.preventDefault(); var file = document.getElementById('fileToUpload').files[0]; var formData = new FormData(); formData.append('fileToUpload', file); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { displayFile(xhr.responseText); } } xhr.open('POST', 'upload.php', true); xhr.send(formData); } function displayFile(fileText) { var fileDisplayArea = document.getElementById('fileDisplayArea'); fileDisplayArea.innerHTML = fileText; } 在这个示例中，我们使用了一个简单的HTML表单来上传文件，使用JavaScript编写了一个事件监听器函数来处理文件上传请求，并使用XMLHttpRequest对象将文件发送到服务器。一旦文件上传成功，我们使用JavaScript编写的另一个函数来将文件内容显示在页面上。此代码还可以扩展，以便同时上传和显示图片文件及其缩略图。为什么无法实现预览和下载

时间: 2023-12-03 21:45:45 浏览: 170

在这个示例中，我们只是简单地将文件的内容显示在页面上，并没有实现预览和下载功能。要实现这些功能，需要对代码进行进一步的修改。为了实现文件预览功能，您可以使用FileReader对象将文件读取为数据URL，然后将其显示在页面上。例如，您可以使用以下代码将上传的图片文件显示在页面上： ``` function displayFile(file) { if (file.type.startsWith('image/')) { var reader = new FileReader(); reader.onload = function() { var img = document.createElement('img'); img.src = reader.result; document.getElementById('fileDisplayArea').appendChild(img); } reader.readAsDataURL(file); } else { var fileDisplayArea = document.getElementById('fileDisplayArea'); fileDisplayArea.innerHTML = 'File uploaded: ' + file.name; } } ``` 要实现文件下载功能，您可以使用Blob对象创建一个URL，然后将其设置为下载链接的href属性。例如，您可以使用以下代码将上传的文件提供为下载链接： ``` function displayFile(file) { if (file.type.startsWith('image/')) { // code for displaying image } else { var fileDisplayArea = document.getElementById('fileDisplayArea'); fileDisplayArea.innerHTML = 'File uploaded: ' + file.name; var downloadLink = document.createElement('a'); downloadLink.href = URL.createObjectURL(file); downloadLink.download = file.name; downloadLink.innerHTML = 'Download'; fileDisplayArea.appendChild(downloadLink); } } ``` 请注意，这些代码仅提供了基本的文件预览和下载功能，您可能需要根据自己的需求进行进一步修改和优化。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通