xhEditor demo : Ajax文件上传

具体参考xhEditor手册和压缩包中demo08.html几种示例

下载xhEditor,主要是让文件夹xheditor_emot、xheditor_plugins、xheditor_skin和文件xheditor-zh-cn.min.js保持在同一个目录中。我都放在了xheditor文件夹中

html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xhEditor demo8 : Ajax文件上传</title>
<link rel="stylesheet" href="common.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="xheditor/xheditor-zh-cn.min.js?v=1.1.3"></script>
<script type="text/javascript">
$(pageInit);
function pageInit()
{
	$('#elm1').xheditor({upLinkUrl:"upload.php",upLinkExt:"zip,rar,txt",upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif,png",upFlashUrl:"upload.php",upFlashExt:"swf",upMediaUrl:"upload.php",upMediaExt:"wmv,avi,wma,mp3,mid",shortcuts:{'ctrl+enter':submitForm}});
}
function insertUpload(arrMsg)
{
	var i,msg;
	for(i=0;i<arrMsg.length;i++)
	{
		msg=arrMsg[i];
		$("#uploadList").append('<option value="'+msg.id+'">'+msg.localname+'</option>');
	}
}
function submitForm(){$('#frmDemo').submit();}
</script>
</head>
<body>

<form id="frmDemo" method="post" action="show.php">
	<h3>xhEditor demo8 : Ajax文件上传</h3>
	1,普通上传模式:<br />
	<textarea id="elm1" name="elm1" rows="12" cols="80" style="width: 80%">
<!--网页编辑器中的内容-->
	</textarea><br /><br />
<input type="submit" name="save" value="Submit" />
	<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>

当前实例调用的Javascript源代码为:

$('#elm1').xheditor({upLinkUrl:"upload.php",upLinkExt:"zip,rar,txt",upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif,png",upFlashUrl:"upload.php",upFlashExt:"swf",upMediaUrl:"upload.php",upMediaExt:"avi"});

请确保当前目录中的upload.php有相应的PHP执行权限,若您使用的是其它的服务器脚本语言,请自行对初始化参数中的upLinkUrl、upImgUrl、upFlashUrl和upMediaUrl进行修改,并开发相应服务器上传接收程序。

注:upload.php仅为演示代码,若您希望在自己的项目中实际使用,请自行修改代码或者重新开发,开发过程中请注意上传文件的格式及大小限制,注意服务器安全问题。

上传接收程序开发规范:

1,上传文件域名字为:filedata

2,返回结构必需为json,并且结构如下:{"err":"","msg":"200906030521128703.gif"}

若上传出现错误,请将错误内容保存在err变量中;若上传成功,请将服务器上的绝对或者相对地址保存在msg变量中。

编辑器若发现返回的err变量不为空,则弹出窗口显示返回的错误内容。

上传管理方案建议:

1,在编辑器初始化时在upload.php后面跟上一个服务器生成的绝对唯一的跟踪值,例如:upload.php?infoid=121312121

2,在服务器接收程序中以这个跟踪值保存到数据库中,同样可以限制单个跟踪值下总上传文件数或者总文件大小,否则就是一个可以上传无限个文件的漏洞了

3,最终当前表单提交时,再根据编辑器提交的HTML内容和数据库中上传内容进行比较,删除所有没有使用的上传文件

4,定期由服务器脚本删除上传数据库中没提交的文件记录,这样就能防止别人将您的网站作为免费相册空间了

注:

我用的是struts2文件上传,在不同的浏览器生成的request header不一样,会造成上传文件失败。经测试,Opera和IE可以。