xhEditor demo : Ajax文件下传
日期：2014-05-16 浏览次数：20866 次
具体参考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可以。
