目录

效果展示

部分内容及实现代码

文件上传

发送数据到当前页面  并使用php处理

 当提交空白表单时 需要用js提前处理 不进行提交

提交过后判断文件格式是否接受

展示文件

 获取文件地址

 开始展示文件

美化或优化

完整代码

效果展示

没学过PHP  其中php内容全靠复制粘贴

创建./upload  文件夹 用来存储文件

用到的技术（一点即可）

html      css       javascript       php

部分内容及实现代码

文件上传

参考：PHP 文件上传 | 菜鸟教程 (runoob.com)

文件上传参考菜鸟教程    其中也有改变的地方

发送数据到当前页面  并使用php处理

 当提交空白表单时 需要用js提前处理 不进行提交

提交过后判断文件格式是否接受

if($_SERVER["REQUEST_METHOD"] == "POST" && empty($_POST["file"]) !== false){        $allowedExts = array("gif", "jpeg", "jpg", "png","zip","rar","tar",'tgz',"txt","xml","html","CSS","js");        $temp = explode(".", $_FILES["file"]["name"]);        // echo $_FILES["file"]["size"];        $extension = end($temp);     // 获取文件后缀名        if ((($_FILES["file"]["type"] == "image/gif")        || ($_FILES["file"]["type"] == "image/jpeg")        || ($_FILES["file"]["type"] == "image/jpg")        || ($_FILES["file"]["type"] == "image/pjpeg")        || ($_FILES["file"]["type"] == "image/x-png")        || ($_FILES["file"]["type"] == "image/png")        || ($_FILES["file"]["type"] == "application/octet-stream")        || ($_FILES["file"]["type"] == "application/x-tar")        || ($_FILES["file"]["type"] == "application/x-compressed")        || ($_FILES["file"]["type"] == "application/x-zip-compressed")        || ($_FILES["file"]["type"] == "text/plain")        || ($_FILES["file"]["type"] == "text/xml")        || ($_FILES["file"]["type"] == "text/html")        || ($_FILES["file"]["type"] == "text/css")        || ($_FILES["file"]["type"] == "text/javascript")        )        && ($_FILES["file"]["size"] < 20480000)           && in_array($extension, $allowedExts)){        if ($_FILES["file"]["error"] > 0){        echo "错误：: " . $_FILES["file"]["error"] . "
";        }        else{            echo '                            ';        move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);        }        }        else{            echo '                            ';        }    }

常见文件类型

常用的MIME类型.doc     application/msWord.docx   application/vnd.openxmlfORMats-officedocument.wordprocessingml.document.rtf       application/rtf.xls     application/vnd.ms-excel application/x-excel.xlsx    application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.ppt     application/vnd.ms-powerpoint.pptx    application/vnd.openxmlformats-officedocument.presentationml.presentation.pps     application/vnd.ms-powerpoint.ppsx   application/vnd.openxmlformats-officedocument.presentationml.slideshow.pdf     application/pdf.swf    application/x-shockwave-flash.dll      application/x-msdownload.exe    application/octet-stream.msi    application/octet-stream.chm    application/octet-stream.cab    application/octet-stream.ocx    application/octet-stream.rar     application/octet-stream.tar     application/x-tar.tgz    application/x-compressed.zip    application/x-zip-compressed.z       application/x-compress.wav   audio/wav.wma   audio/x-ms-wma.wmv   video/x-ms-wmv.mp3 .mp2 .mpe .mpeg .mpg     audio/mpeg.rm     application/vnd.rn-realmedia.mid .midi .rmi     audio/mid.bmp     image/bmp.gif     image/gif.png    image/png.tif .tiff    image/tiff.jpe .jpeg .jpg     image/jpeg.txt      text/plain.xml     text/xml.html     text/html.css      text/css.js        text/javascript.mht .mhtml   message/rfc822

展示文件

想着图片之类的还展示图片  其他类型的使用文件名字 + 链接跳转过去 下载或其他

先用php获取文件地址   全部放到数组里   然后对数组遍历输出即可。

 获取文件地址

$prin = traverseDir('./upload');$num = count($prin);    function traverseDir($dirPath=false,$type='all'){    //检测是否为文件夹    if(!$dirPath||!is_dir($dirPath)){        return false;    }    $files = array();    //增加一个@抑制错误    if(@$handle = opendir($dirPath)){       while(($file=readdir($handle))!==false){           //排除'.'当前目录和'..'上级目录           if($file != '..' && $file != '.'){               //只记录文件               if($type == 'file'){                   if(is_dir($dirPath.DIRECTORY_SEPARATOR.$file)){                       //如果是文件夹，则重新遍历该文件的文件                       $files[$file] = traverseDir($dirPath.DIRECTORY_SEPARATOR.$file,'file');                       //把文件存入数组中                        foreach($files[$file] as $k => $v){if(is_file($v)){    $files[] = $v;    //删除源数组中的对应文件路径    unset($files[$file][$k]);}                        }                       //删除源数组中的对应文件路径数组                       unset($files[$file]);                   }else{                       //如果是文件则直接存入数组                       $files[] = $dirPath.DIRECTORY_SEPARATOR.$file;                   }               }else{//记录含文件                    if(is_dir($dirPath.DIRECTORY_SEPARATOR.$file)){                        //如果是文件夹，则重新遍历该文件的文件                        $files[$file] = traverseDir($dirPath.DIRECTORY_SEPARATOR.$file);                    }else{                        //如果是文件则直接存入数组                        $files[] = $dirPath.DIRECTORY_SEPARATOR.$file;                    }               }           }       }closedir($handle);    }    return $files;}

 开始展示文件

    for($i=0;$i<$num;++$i){            if($i%5==0){                echo '
';            }            $name = substr($prin[$i],9);            if(strpos($name,'.png')!== false || strpos($name,'.jpg')!== false){                echo  '
';            }            else{                echo  '
'.$name.'
';            }                    }

美化或优化

1.  由于php发送表单时，会跳转到别的页面    两种方法解决

   一 使用ajax传输数据   可惜我不会

   二 跳转过去后   再使用js跳转过来 

2. input的美化   

   可以使input标签隐藏  然后用另外的标签来代替input

   利用javascrip实现

完整代码

 $v){if(is_file($v)){    $files[] = $v;    //删除源数组中的对应文件路径    unset($files[$file][$k]);}                        }                       //删除源数组中的对应文件路径数组                       unset($files[$file]);                   }else{                       //如果是文件则直接存入数组                       $files[] = $dirPath.DIRECTORY_SEPARATOR.$file;                   }               }else{//记录含文件                    if(is_dir($dirPath.DIRECTORY_SEPARATOR.$file)){                        //如果是文件夹，则重新遍历该文件的文件                        $files[$file] = traverseDir($dirPath.DIRECTORY_SEPARATOR.$file);                    }else{                        //如果是文件则直接存入数组                        $files[] = $dirPath.DIRECTORY_SEPARATOR.$file;                    }               }           }       }closedir($handle);    }    return $files;}echo '    
来源地址：https://blog.csdn.net/qq_53950686/article/details/126928349