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可以。