目录
效果展示
部分内容及实现代码
文件上传
发送数据到当前页面 并使用php处理
当提交空白表单时 需要用js提前处理 不进行提交
提交过后判断文件格式是否接受
展示文件
获取文件地址
开始展示文件
美化或优化
完整代码
没学过php 其中php内容全靠复制粘贴
创建./upload 文件夹 用来存储文件
用到的技术(一点即可)
html css javascript php
参考:PHP 文件上传 | 菜鸟教程 (runoob.com)
文件上传参考菜鸟教程 其中也有改变的地方
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);
/**
* 遍历指定路径的文件夹中的文件
* @param $dirPath 文件绝对路径
* @param $type 遍历方法 默认参数为 $type='all' 返回所有文件作为一维数组返回,如果$type='file',则与多维数组返回
* @return array 检索到文件成功返回内部文件路径数组,失败返回false;
*/
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.'
';
}
}
由于php发送表单时,会跳转到别的页面 两种方法解决
一 使用ajax传输数据 可惜我不会
二 跳转过去后 再使用js跳转过来
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 '
beink
';
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.'
';
}
}
echo '
';
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 '
';
}
}
?>