xhEditor demo : Ajax文件上传

最新推荐文章于 2020-12-14 11:28:23 发布

xiaofancn

最新推荐文章于 2020-12-14 11:28:23 发布

阅读量169

点赞数

分类专栏： web前端文章标签： Ajax PHP JavaScript jQuery CSS ViewUI

本文链接：https://blog.csdn.net/xiaofancn/article/details/83885046

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

具体参考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可以。

xiaofancn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
xhEditor demo : Ajax文件上传

具体参考xhEditor手册和压缩包中demo08.html几种示例下载xhEditor，主要是让文件夹xheditor_emot、xheditor_plugins、xheditor_skin和文件xheditor-zh-cn.min.js保持在同一个目录中。我都放在了xheditor文件夹中 html&lt;head&gt;&lt;meta http-equiv...
复制链接

扫一扫