ajax+php文件管理器

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了ajax+php文件管理器，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

发现前两年写的一个文件管理器，感觉挺实用的，分享出来，共两个文件file.html,file.PHP上传到目录中即可，上传功能请自行下载 uploadify 然后在file.html中配置swf的地址即可

file.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tongjh原创，交流请发邮件至576272452@qq.com</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://demo.jb51.net/js/2011/artDialog/artDialog.source.js?skin=default"></script>
<script type="text/javascript" src="http://www.uploadify.com/wp-content/themes/uploadify/js/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.uploadify.com/wp-content/themes/uploadify/style.css" />
<script Charset="GB2312">
$(function(){
	var mypath='';//当前所在目录
	//跳转至指定目录
	var goDir = function(path){
			mypath = {path:path};//当前所在目录
			$.ajax({
				type:"GET",url:"file.PHP",data:mypath,dataType:"json",success:function(json){
					if(json.error){//没有文件或目录
						html = json.error;	
					}else{
						var files = json.files;//得到文件数组json
						var dirs = json.dirs;//得到目录数组json
						var html='';//最后组合的html
						if(dirs){//显示目录
							$.each(dirs,function(k,v){
								html += '<div class="dir" alt="'+v.path+'">'+v.dir+'</div>'; 
							});
						}
						if(files){
							$.each(files,v){
								html += '<div class="file" alt="'+v.path+'">'+v.file+'</div>'; 
							});	
						}
					}
					$(".Box").html(html);//填充HTML
					//完成面包宵导航
					paths = path.split('/');
					var p = "当前位置：";var pp = "";
					for(i=0;i<paths.length;i++){
						pp += paths[i]+'/'; 
						str = pp.slice(0,-1);
						p += '<span class="position" alt="'+str+'">'+paths[i]+'</span> -> ';
					}
					p = p.slice(0,-4);
					$(".weizhi").html(p);
				 }
			});
		}
	//打开页面直接给出默认目录root为根目录
	 goDir("./");
	//点击目录进入下一层
	$(".Box").delegate('.dir','click',function(e){
		var path =$(this).attr("alt");
		goDir(path);
	});
	//点击位置进入位置
	$(".weizhi").delegate(".position","click",function(){
		 var path = $(this).attr("alt");
		 goDir(path);
	});
	// 捕获在目录上的右击事件   
    $(".Box").delegate(".dir","contextmenu",function(e){
		var offX = e.pageX;//获得鼠标偏移X值
		var offY = e.pageY;//获得鼠标偏移Y值
		//设置右键菜单的位置
		$(this).append('<div class="youjian">'+$(".youjianCopy").html()+'</div>');
		$(".youjian").css({left:offX-5,top:0}); 
		//绑定右键菜单的PATH 
		var path =$(this).attr("alt");
		$(".youjian").attr("alt",path);
		// 拦截右击事件
        return false;  
    });
	// 捕获文件上的右击事件   
    $(".Box").delegate(".file",function(e){
		var offX = e.pageX;//获得鼠标偏移X值
		var offY = e.pageY;//获得鼠标偏移Y值
		//设置右键菜单的位置
		$(this).append('<div class="youjian">'+$(".fileMenu").html()+'</div>');
		$(".youjian").css({left:offX-5,path);
		// 拦截右击事件
        return false;  
    });
	var myDialog;//artDialog窗口
	//文件及文件右键菜单点击管理目录事件
	$(".Box,.weizhi").delegate(".youjian li",function(event){
		event.stopPropagation();//阻止事件向上冒泡
		var eName = $(this).attr("alt");//点击事件名称
		var eDir = $(this).parent(".youjian").attr("alt");//执行事件的目录
		//删除目录后刷新父目录
		var path = "";//父路径
		var paths = eDir.split('/');
		for(i=0;i<paths.length-1;i++){
			path += paths[i]+'/';
		}
		var pp = path.slice(0,-1);//去掉最后/的父路径
		if(eName == 'deledir' || eName == 'deleFile'){//ajax执行事件删除目录			
			$.ajax({
				type:"GET",data:"eName="+eName+"&eDir="+eDir,success: function(json){
					if(json.ok){
						alert(json.ok);
						goDir(pp);
					}else{
						alert(json.error);
						goDir(pp);
					}
				}
			});
		}else if(eName == 'editFile'){//弹出层,编辑文件
			$.ajax({//ajax获得文件的文本内容
				 type:"GET",data:"url="+eDir+"&eName="+eName,success: function(json){
					 if(json.fileType == 'pic'){//如果是文件
						 var input = '<img src="'+json.fileStr+'" />';	
						 var button = ''; 
					 }else if(json.fileType == 'txt'){//如果是文本
						 var input = '<textarea name="fname" id="fname" cols="45" rows="5" style="width:810px;height:510px;">'+json.fileStr+'</textarea>';
						 var button = '<input type="button" id="fbutton" value="提交" />';
					 }else{//是不可编辑的文件
						 var input = '文件 [<span style="color:red">'+eDir+'</span>] 不可编辑';	
						 var button = '';  
					 }
					myDialog = art.dialog({//弹出编辑框
						  title:'文件编辑： '+eDir,lock: true,background: '#000',opacity: 0.87,content:'<form action="" method="get" id="eaction" onsubmit="return false"><div><input name="eName" type="hidden" id="eName" value="fileSave" /><input name="eDir" type="hidden" id="eDir" value="'+eDir+'" />'+input+'</div><div align="right">'+button+'</div></form>'
					 });
				 }	
			});
		}else{//弹出输入文本框,在增加目录、重命名目录、增加文件时需要一个文本框输入input的name
			myDialog = art.dialog({
				  title:'输入文件或目录名称',content:'<form action="" method="get" id="eaction" onsubmit="return false"><div><input name="eName" type="hidden" id="eName" value="'+eName+'" /><input name="eDir" type="hidden" id="eDir" value="'+eDir+'" /><input type="input" name="fname" id="fname" /></div><div align="right"><input name="fname" type="button" id="fbutton" value="提交" /></div></form>'
			 });
		}
	});
	//右键划过管理菜单换背景
	$(".Box,"hover",function(){
		$(this).css({background:"#666",color:"#fff"});
	});
	$(".Box,"mouseleave",function(){
		$(this).css({background:"#9cc",color:"#000"});	
	});
	//划过.dir or .file背景换色 及 右键离开管理目录事件
	$(".Box").delegate(".Box>div",function(){
		$(this).css({background:"#9cc"}).siblings().css({background:"#fff"});
	});
	$(".Box").delegate(".Box>div",function(){
		$("div").remove(".youjian");
	});
	//提交对目录的管理事件
	$("body").delegate("#fbutton",function(){
		 var formval = $("#eaction").serialize();
		 myDialog.close();//关闭弹出框
		 //ajax提交对目录的管理事件，增加目录、重命名目录、增加文件
		 $.ajax({
			type:"GET",data:formval,success: function(json){
				if(json.ok){
					alert(json.ok);
					if(json.fname){
						goDir(json.fname);//如果是重命名目录，则刷新当前目录
					}
				}else{
					alert(json.error);	
				}
			}
		});	 
	});
	//文件批量上传
	$('#file_upload').uploadify({
		'buttonText' : '上传文件到本目录','buttonClass' : 'upbtn','width':120,'height':25,'swf'      : '/jqup/uploadify.swf','uploader' : 'file.PHP','formData' : {'eName':'uploads','path':mypath},'onUploadSuccess' : function(file,data,response){
				alert(data);//提示信息
		},'onUploadStart' : function(file) {
            $("#file_upload").uploadify("settings","formData",{"path":mypath});//改变上传值
        },'onQueueComplete' : function(queueData) {
            alert('成功上传' + queueData.uploadsSuccessful + '个文件,上传失败'+queueData.uploadsErrored+'个文件');
			goDir(mypath);//跳转到上传目录
        }
		
	});
	//捕获面包屑导航右击事件
	$(".weizhi").delegate(".position",function(e){
		var offX = e.pageX;//获得鼠标偏移X值
		var offY = e.pageY;//获得鼠标偏移Y值
		//设置右键菜单的位置
		$(".weizhi").append('<div class="youjian">'+$(".youjianCopy").html()+'</div>');
		$(".youjian").css({left:offX-5,path);
		// 拦截右击事件
        return false;
	});
});
</script>
<style>
.file{color:#00f;cursor:pointer;position:relative;}
.dir{color:#f00;cursor:pointer;position:relative;}
.position{cursor:pointer;}
.youjian{cursor:pointer;width:100px;background:#9cc;position:absolute;z-index:999;overflow:hidden;}
.youjian li{list-style:none;line-height:25px;padding-left:10px;color:#000;}
.upbtn{background:#666666;color:#fff;font-size:14px;text-align:center;}
.weizhi{position:relative;}
 </style>
</head>

<body>
<div class="weizhi">当前位置：</div>
<hr /><input type="file" name="file_upload" id="file_upload" />
<div class="Box"></div>
<div class="youjianCopy" style="display:none">
    <li alt="addDir">增加目录</li>
    <li alt="addFile">增加文件</li>
    <li alt="rename">重命名目录</li>
    <li alt="deledir">删除目录</li>
</div>
<div class="fileMenu" style="display:none">
    <li alt="editFile">编辑文件</li>
    <li alt="renameFile">重命名文件</li>
    <li alt="deleFile">删除文件</li>
</div>
</body>
</html>



file.PHP 

<?PHP
/**
 *  文件操作部分
 *  tongjh原创，交流请发邮件至576272452@qq.com
*/

//文件上传
if($_POST["eName"] == 'uploads'){
	$path = '/'.$_POST['path'].'/';//上传路径
	$verifyToken = md5('unique_salt' . $_POST['timestamp']);//安全性检测，目录已关闭
	if (!empty($_FILES)) {
		$tempFile = $_FILES['Filedata']['tmp_name'];//上传的文件名称
		$targetPath = $_SERVER['DOCUMENT_ROOT'] . $path;//上传文件的路径
		$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];//上传的文件位置
		
		$fileTypes = array('jpg','jpeg','gif','png'); // 允许的上传文件类型
		$fileParts = pathinfo($_FILES['Filedata']['name']);//上传文件类型
		
		if (in_array($fileParts['extension'],$fileTypes)) {
			move_uploaded_file($tempFile,$targetFile);
			echo '上传文件'.$targetFile.'成功';
		} else {
			echo '上传的文件类型不是允许的';
		}
	}
}


//增加目录
if($_GET["eName"] == 'addDir'){
	if(file_exists($_GET['eDir'].'/'.$_GET['fname'])){
		$msg = array('error'=>'目录已经存在');
	}else{
		if(@mkdir($_GET['eDir'].'/'.$_GET['fname'])){
			$msg = array('ok'=>'成功建立目录'.$_GET['fname'],'fname'=>$_GET['eDir'].'/'.$_GET['fname']);
		}else{
			$msg = array('error'=>'无法建立目录');
		}	
	}
	echo json_encode($msg);
}


//重命名目录
if($_GET["eName"] == 'rename'){
	$rename = explode('/',$_GET['eDir']);
	for($i=0;$i<count($rename)-1;$i++){
		$str .= $rename[$i].'/';	
	}
	$rename = $str.$_GET['fname'];
	if(@rename($_GET['eDir'],$rename)){
		$msg = array('ok'=>'成功重命名目录'.$rename,'fname'=>$rename);	
	}else{
		$msg = array('error'=>'无法重命名目录');	
	}
	echo json_encode($msg);
}

//删除目录
if($_GET["eName"] == 'deledir'){
	if(@rmdir($_GET['eDir'])){
		$msg = array('ok'=>'成功删除目录 '.$_GET['eDir']);
	}else{
		$msg = array('error'=>'无法删除目录，可能不是空目录或没有这个目录 '.$_GET['eDir']);
	}
	echo json_encode($msg);
}

//打开目录
if($_GET['path']){
	$path = $_GET['path'];
	if($path == 'root'){$path = $_SERVER['DOCUMENT_ROOT'];}
	$files = getFiles($path);
	echo json_encode($files);	
}


//增加文件
if($_GET["eName"] == 'addFile'){
	if(@touch($_GET['eDir'].'/'.$_GET['fname'])){
		$msg = array('ok'=>'成功增加文件'.$_GET['fname'],'fname'=>$_GET['eDir']);	
	}else{
		$msg = array('error'=>'无法建立文件');
	}
	echo json_encode($msg);
}

//重命名文件
if($_GET["eName"] == 'renameFile'){
	$rename = explode('/',$_GET['eDir']);
	for($i=0;$i<count($rename)-1;$i++){
		$str .= $rename[$i].'/';	
	}
	$rename = $str.$_GET['fname'];//新文件名
	if(@rename($_GET['eDir'],$rename)){
		$msg = array('ok'=>'成功重命名文件'.$rename,'fname'=>substr($str,-1));	
	}else{
		$msg = array('error'=>'无法重命名文件'.$rename);	
	}
	echo json_encode($msg);
}

//编辑文件
if($_GET["eName"] == 'editFile'){
	/*判断文件类型*/
	$finfo = pathinfo($_GET['url']);
	$filetype = $finfo["extension"];
	$picArray = array('jpg','png','ico');
	$txtArray = array('PHP','txt','inc','html','htm','js','css','asp');
	if(in_array($filetype,$picArray)){//文件是图片
		$msg["fileStr"] = $_GET['url'];	
		$msg["fileType"] = "pic";	
	}elseif(in_array($filetype,$txtArray)){//文件是文本类型
		$msg["fileStr"] = gbkToUtf8(@file_get_contents($_GET["url"]));
		$msg["fileType"] = "txt";
	}else{//文件不可编辑
		$msg["fileStr"] = "文件不可编辑";	
	}
	echo json_encode($msg);
}

//保存文件
if($_GET["eName"] == 'fileSave'){
	if(@file_put_contents($_GET["eDir"],stripslashes($_GET["fname"]))){
		$msg["ok"] = "成功修改文件";
	}else{
		$msg["error"] = "没有找到文件";
	}
	echo json_encode($msg);
}

//删除文件
if($_GET["eName"] == 'deleFile'){
	if(@unlink($_GET['eDir'])){
		$msg = array('ok'=>'成功删除文件 '.$_GET['eDir']);
	}else{
		$msg = array('error'=>'无法删除文件，请检查是否拥有删除权限 '.$_GET['eDir']);
	}
	echo json_encode($msg);
}

/**
 *  得到一个目录下的所有目录与文件
 * @access    public
 * @param     string  $path  给定的目录
 * @return    array(三维数组) 如果成功返回一个目录下的所有目录和文件，失败返回一个失败提示数组
 */
function getFiles($path){
	if($fh = @opendir($path)){
		while(false !== ($file = readdir($fh))){
			if($file == '.' || $file == '..'){
				continue;	
			}
			$filetype = filetype($path.'/'.$file);
			if($filetype == 'dir'){
				$files['dirs'][$file]['dir'] = $file;
				$files['dirs'][$file]['path'] = $path.'/'.$file;
			}
			if($filetype == 'file'){
				$files['files'][$file]['file'] = $file;
				$files['files'][$file]['path'] = $path.'/'.$file;
			}
		}
		if(is_array($files)){
			return $files;
		}else{
			return array('error'=>'没有文件');	
		}
	}else{
		return array('error'=>'没有目录');
	}
}
/**
 *  字符串编码转换,转换成uft8
 */
function gbkToUtf8 ($value) {
	$code = chkCode($value);
	if($code == "GBK"){
		return iconv("GBK","UTF-8",$value);
	}
	if($code == "GB2312"){
		return iconv("GB2312",$value);
	}
	if($code == "GB18030"){
		return iconv("GB18030",$value);
	}
	return $value;	
}

/**
 *  获得字符串的编码
 */
function chkCode($string){
	 $code = array('UTF-8','GBK','GB18030','GB2312');
	 foreach($code as $c){
		 if( $string === iconv('UTF-8',$c,iconv($c,'UTF-8',$string))){
			 return $c;
		 }
	 }
}

?>
原文链接：https://www.f2er.com/ajax/163070.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作