给ckeditor 加上传功能，并进行web客户端校验

1、给ckeditor加上传功能
关键代码摘录如下：

(1)页面代码：
<td align="center" class="td_c">
<s:textarea cols="2" name="content"></s:textarea>
<script type="text/javascript">
CKEDITOR.replace('content',{
filebrowserUploadUrl : '/upload/uploadCkeditor.action?type=File',
filebrowserImageUploadUrl : '/upload/uploadCkeditor.action?type=Image',
filebrowserFlashUploadUrl : '/upload/uploadCkeditor.action?type=Flash'
}); //content为textarea的id
</script>
</td>

(2)struts2代码：
public class UploadAction extends ActionSupport {
private Log log;

private String basePath; // 上传文件存放的根目录，相对路径 eg: basePath=UserFiles
private String baseDir; // 上传文件存放的根目录，绝对路径
private String type; // 上传的文件类型
private String CKEditorFuncNum; // 回调时显示的位置

private File upload; // 上传文件
private String fileName; // 上传文件的文件名，该文件名不包括文件的路径
private String contentType; //上传文件的MIME类型
private String returnFileName; // 返回的文件名及文件路径
private PrintWriter out; // 返回结果
private String tips; // 操作返回提示消息
private String imgName; // 页面<img>标签的ID
private String head; // 页面输入框的ID头
private String msg;

public UploadAction() {
log = LogFactory.getLog(this.getClass());
}

/**
* uploadCkeditor: 对应在线编辑器Ckeditor插件的上传操作
*/
public String uploadCkeditor() {
StringBuffer strB = new StringBuffer();

HttpServletRequest request = ServletActionContext.getRequest();
msg = request.getParameter("fromUrl");
log.debug("fromUrl: " + msg);

HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
try {
out = response.getWriter();
} catch (IOException e) {
log.error("网络连接异常，具体情况如下所示：");
log.error(e.getMessage());
return ERROR;
} catch (IllegalArgumentException e) {
log.error("非法参数异常，具体情况如下所示：");
log.error(e.getMessage());
return ERROR;
} catch (Exception e) {
log.error("未知异常，具体情况如下所示：");
log.error(e.getMessage());
return ERROR;
}

PropertiesOperate.setFilePath(InitListener.getClassAbsolutePath(initPath));

String extName = FileOperate.getFileExtension(fileName);

// 1.限制每个上传文件的最大长度。
String maxFileSize = PropertiesOperate.readValue("MaxSize" + type);
long maxSize = Long.parseLong(maxFileSize);

if (upload.length() > maxSize) {
strB.append("<script type=\"text/javascript\">");
strB.append("alert('文件大小不能超过" + (maxSize / 1024) + "KB！');");
strB.append("window.parent.CKEDITOR.tools.callFunction(");
strB.append(CKEditorFuncNum + ",'','')");
strB.append("</script>");
log.debug("回执：" + strB.toString());
out.write(strB.toString());
out.flush();
out.close();
return ERROR;
}

// 2.限制总上传数据的长度。
// String totalMaxFileSize = PropertiesOperate.readValue("TotalMaxSize" + type);
// long totalMaxSize = Long.parseLong(totalMaxFileSize);

// 3.设定允许上传的文件扩展名。
String allowedFiles = PropertiesOperate.readValue("AllowedExtensions" + type);
if (allowedFiles.length() > 0
&& (allowedFiles.indexOf(extName.replaceAll(".", "")) == -1)) {
strB.append("<script type=\"text/javascript\">");
strB.append("alert('只能上传后缀名为" + allowedFiles + "的文件！');");
strB.append("window.parent.CKEDITOR.tools.callFunction(");
strB.append(CKEditorFuncNum + ",'','')");
strB.append("</script>");
log.debug("回执：" + strB.toString());
out.write(strB.toString());
out.flush();
out.close();
return ERROR;
}

// 4.设定禁止上传的文件,禁止上传带有指定扩展名的文件和没有扩展名的文件。
String deniedFiles = PropertiesOperate.readValue("DeniedExtensions" + type);
if (deniedFiles.length() > 0 && (deniedFiles.indexOf(extName) != -1)) {
strB.append("<script type=\"text/javascript\">");
strB.append("alert('不能上传后缀名为" + deniedFiles + "的文件！');");
strB.append("window.parent.CKEDITOR.tools.callFunction(");
strB.append(CKEditorFuncNum + ",'','')");
strB.append("</script>");
log.debug("回执：" + strB.toString());
out.write(strB.toString());
out.flush();
out.close();
return ERROR;
}

// 获取根目录名称
basePath = PropertiesOperate.readValue("baseDir");
if (basePath == null || "".equals(basePath.trim())) {
basePath = "UserFiles/CkeditorFiles";
}

baseDir = InitListener.getWebAppAbsolutePath(basePath);
String webAppPath = InitListener.getWebAppPath();

File baseFile = new File(baseDir);
if (!baseFile.exists()) {
baseFile.mkdirs();
}

// 格式化目录和文件命名方式
SimpleDateFormat dirFormatter = new SimpleDateFormat("yyyyMM");
SimpleDateFormat fileFormatter = new SimpleDateFormat("yyyyMMddHHmmssSSS");

// 实例化dNow对象，获取当前时间
Date dNow = new Date();

// 设定上传文件路径，保存文件的相对路径
String currentPath = baseDir + "/" + type + "/"
+ dirFormatter.format(dNow);

// 判断文件夹是否存在，不存在则创建
File dirTest = new File(currentPath);
if (!dirTest.exists()) {
dirTest.mkdirs();
}

// 根据系统日期和时间设置文件名称，eg: 20051010094521
String newName = null;
if(savename == null || "".equals(savename.trim())){
newName = fileFormatter.format(dNow);
} else {
newName = savename;
}
String newFileName = newName + FileOperate.getFileExtension(fileName);
File newFile = new File(currentPath + "/" + newFileName);
try {
log.debug("CKEditor上传回调函数编号：" + CKEditorFuncNum);
FileOperate.copy(upload, newFile);
strB.append("<script type=\"text/javascript\">");
strB.append("alert('上传成功！');");
strB.append("window.parent.CKEDITOR.tools.callFunction(");
strB.append(CKEditorFuncNum + ",");
strB.append("'" + currentPath.replaceFirst(webAppPath, "/") + "/" + newFileName + "',''" + ")");
strB.append("</script>");
log.debug(strB.toString());
log.debug(currentPath.replaceFirst(webAppPath, "/"));
out.write(strB.toString());
return SUCCESS;
} catch (FileNotFoundException e) {
log.error("文件未找到，导致上传失败");
log.error(e.getMessage());
strB.append("<script type=\"text/javascript\">");
strB.append("alert('目标文件没找到！');");
strB.append("window.parent.CKEDITOR.tools.callFunction(");
strB.append(CKEditorFuncNum + ",'','')");
strB.append("</script>");
log.debug("回执：" + strB.toString());
out.write(strB.toString());
return ERROR;
} catch (IOException e) {
log.error("文件IO异常，导致上传失败");
log.error(e.getMessage());
strB.append("<script type=\"text/javascript\">");
strB.append("alert('文件上传发生输入、输出错误！');");
strB.append("window.parent.CKEDITOR.tools.callFunction(");
strB.append(CKEditorFuncNum + ",'','')");
strB.append("</script>");
log.debug("回执：" + strB.toString());
out.write(strB.toString());
return ERROR;
} catch (Exception e){
log.error("未知异常，导致上传失败");
log.error(e.getMessage());
strB.append("<script type=\"text/javascript\">");
strB.append("parent.msg('文件上传发生错误！');");
strB.append("window.parent.CKEDITOR.tools.callFunction(");
strB.append(CKEditorFuncNum + ",'','')");
strB.append("</script>");
log.debug("回执：" + strB.toString());
out.write(strB.toString());
return ERROR;
} finally {
out.flush();
out.close();
}
}

public String getType() {
return type;
}

public void setType(String type) {
this.type = type;
}

public String getCKEditorFuncNum() {
return CKEditorFuncNum;
}

public void setCKEditorFuncNum(String editorFuncNum) {
CKEditorFuncNum = editorFuncNum;
}

public PrintWriter getOut() {
return out;
}

public void setOut(PrintWriter out) {
this.out = out;
}

public String getInitPath() {
return initPath;
}

public void setInitPath(String initPath) {
this.initPath = initPath;
}

public void setUploadFileName(String fileName) {
this.fileName = fileName;
}

public void setUploadContentType(String contentType) {
this.contentType = contentType;
}

public void setUpload(File upload) {
this.upload = upload;
}

public String getReturnFileName() {
return returnFileName;
}

public String getTips() {
return tips;
}

public void setTips(String tips) {
this.tips = tips;
}

public String getImgName() {
return imgName;
}

public void setImgName(String imgName) {
this.imgName = imgName;
}

public String getHead() {
return head;
}

public void setHead(String head) {
this.head = head;
}

public String getMarkContent() {
return markContent;
}

public void setMarkContent(String markContent) {
this.markContent = markContent;
}

public String getMsg() {
return msg;
}

public void setMsg(String msg) {
this.msg = msg;
}
}

2、web客户端的上传前校验
打开ckeditor控件中的ckeditor.js文件，搜索“multipart/form-data”，找到上传对话框的代码：
t.$.write(['<html><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">','<form name="uploadFileForm" enctype="multipart/form-data" method="POST" action="',e.htmlEncode(u.action),'">','<input type="file" name="',e.htmlEncode(u.id||'cke_upload'),'" size="',e.htmlEncode(x>0?x:''),'" />','</form>','</body></html>'].join(''));
(1)在</title>后面加入如下代码组成的长字符串，注意特珠符号的转义：
<script type="text/JavaScript">
// javascript监测(控制 )上传图片文件大小和格式
var oForm = new Object();
var oImage = new Image();//建立一个图像对象
var fileName; // 文件名
var fileExt; // 文件扩展名
var allImgExt=".jpg|.jpeg|.gif|.bmp|.png|";//全部图片格式类型
oImage.attachEvent('onload',getSize);
oImage.attachEvent('onerror',doWithError);
function checkImage(objForm, objInput){
oForm = objForm;
oImage.src = objInput.value;
fileName = objInput.value;
fileExt=fileName.substr(fileName.lastIndexOf(".")).toLowerCase();
}
function getSize(){
// 判断文件大小是否允许上传
var oImgSize = Math.floor(oImage.fileSize/1024);
if(oImgSize>800){
window.alert('不允许上传大于800KB的图片！');
oForm.reset();
return;
}
//判断文件类型是否允许上传
if(allImgExt!=0 && allImgExt.indexOf(fileExt+"|")==-1){
window.alert("该文件类型不允许上传。请上传 "+allImgExt+" 类型的文件，当前文件类型为"+fileExt);
oForm.reset();
return;
}
}
function doWithError(){
window.alert('出现错误：图片格式不正确或者图片已损坏，请重新选择图片上传！');
oForm.reset();
}
</script>

(2)在<input type="file"后面插入如下代码：
onpropertychange="javascript:checkImage(document.uploadFileForm, this);"

(3)上述只能校验图片文件的大小和文件格式，对于非图片文件，我们可以利用Image的dynsrc属性来实现对多种文件大小的校验，如下代码所示：
<script type="text/JavaScript">
// javascript监测(控制 )上传各种文件大小和格式
var oUploadForm = new Object();
var oFileImage = new Image();//建立一个图像对象
var tFileName; // 文件名
var tFileExt; // 文件扩展名
var allowExt="?" //允许上传的文件类型 ?为无限制 每个扩展名后边要加一个"|" 小写字母表示
var disableExt=".exe|.bat|.js|.sql|.dll|"; //不允许上传的文件类型 ?为无限制 每个扩展名后边要加一个"|" 小写字母表示
oFileImage.attachEvent('onerror',doWithFileError);
function checkFile(objForm, objInput){
oUploadForm = objForm;
oFileImage.dynsrc = objInput.value;
tFileName = objInput.value;
tFileExt = tFileName.substr(tFileName.lastIndexOf(".")).toLowerCase();
// 判断文件大小是否允许上传
var oFileSize = Math.floor(oFileImage.fileSize/1024);
if(oFileSize>800 && objInput.value != ""){
window.alert('不允许上传大于800KB的图片！');
oUploadForm.reset();
return;
}
//判断文件类型是否允许上传
if(allowExt!=0 && allowExt != "?" && allowExt.indexOf(fileExt+"|")==-1 && objInput.value != ""){
window.alert("该文件类型不允许上传。请上传 "+allowExt+" 等类型文件，当前文件类型为"+tFileExt);
oUploadForm.reset();
return;
}
//判断文件类型是否不允许上传
if(disableExt!=0 && disableExt.indexOf(tFileExt+"|")!=-1 && objInput.value != ""){
window.alert("当前文件类型为 "+tFileExt+ " 不允许上传。请注意 "+disableExt+" 等类型文件均不允许上传。");
oUploadForm.reset();
}
}
function doWithFileError(){
window.alert('出现错误：图片格式不正确或者图片已损坏，请重新选择图片上传！');
oUploadForm.reset();
}
</script>