用html编写一个静态页面 实现以下功能:①同时上传多个pdf或者doc或者docx文件②上传的文件存在一个表格里面③表格里面每个文件的后面有两个选项,预览该文件和下载该文件
时间: 2024-03-21 10:41:49 浏览: 57
使用HTML实现一个静态页面(含源码)
5星 · 资源好评率100%
好的,我可以为您提供一份样例代码,您可以参考一下:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file">选择文件:</label>
<input type="file" name="file[]" id="file" multiple><br><br>
<input type="submit" name="submit" value="上传">
</form>
<table border="1">
<tr>
<th>文件名</th>
<th>大小</th>
<th>预览</th>
<th>下载</th>
</tr>
<?php
$folder = "uploads/";
if(is_dir($folder)){
if($handle = opendir($folder)){
while(($file = readdir($handle)) !== false){
if($file != "." && $file != ".."){
$file_size = filesize($folder.$file);
$file_size = round($file_size/1024, 2)." KB";
echo '<tr>';
echo '<td>'.$file.'</td>';
echo '<td>'.$file_size.'</td>';
echo '<td><a href="uploads/'.$file.'" target="_blank">预览</a></td>';
echo '<td><a href="uploads/'.$file.'" download>下载</a></td>';
echo '</tr>';
}
}
closedir($handle);
}
}
?>
</table>
</body>
</html>
```
PHP代码:
```php
<?php
if(isset($_FILES['file'])){
$errors = array();
$file_names = array();
$total_size = 0;
foreach($_FILES['file']['tmp_name'] as $key => $tmp_name){
$file_name = $_FILES['file']['name'][$key];
$file_size = $_FILES['file']['size'][$key];
$file_tmp = $_FILES['file']['tmp_name'][$key];
$file_type = $_FILES['file']['type'][$key];
if($file_size > 2097152){
$errors[] = '文件大小不能超过2MB';
}
$allowed_ext = array('pdf', 'doc', 'docx');
$file_ext = pathinfo($file_name, PATHINFO_EXTENSION);
if(!in_array($file_ext, $allowed_ext)){
$errors[] = '只允许上传PDF、DOC或DOCX文件';
}
if(empty($errors) == true){
$upload_dir = "uploads/";
if(is_dir($upload_dir) == false){
mkdir("$upload_dir", 0700);
}
if(move_uploaded_file($file_tmp, $upload_dir.$file_name)){
$file_names[] = $file_name;
$total_size += $file_size;
}
}
}
if(empty($errors)){
echo '<script>alert("已成功上传文件!");</script>';
}else{
foreach($errors as $error){
echo $error.'<br>';
}
}
}
?>
```
注意事项:
1. 上传的文件会被保存到 "uploads/" 目录下。
2. 预览和下载链接都是直接使用文件名拼接出来的,因此请注意上传的文件名不要包含特殊字符,如空格、中文等。
3. 可以根据需要调整文件大小和类型限制的值。
阅读全文