`
aw815
  • 浏览: 1798 次
  • 性别: Icon_minigender_2
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

给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>
1
3
分享到:
评论

相关推荐

    ckeditor5 全功能版(纯手工编译)

    总的来说,CKEditor 5 全功能版提供了一个强大且灵活的文本编辑解决方案,无论是对于简单的博客系统还是复杂的Web应用程序,都能胜任。手工编译的版本确保了它能满足大部分项目需求,而详细的自定义教程则为有特殊...

    Ckeditor 应用于 java web

    为了实现这个功能,开发者需要在后端设置一个接收文件上传的接口,处理文件上传请求,保存文件到服务器,并返回文件路径或URL给Ckeditor,以便编辑器能正确显示这些媒体内容。 **4. 去除服务器文件浏览功能** 出于...

    ckeditor5全屏按钮

    为了集成CKEditor 5全屏按钮到自己的项目中,开发者需要引入CKEditor 5的库文件,并按照官方文档的指导进行初始化。如果需要自定义全屏行为,可以使用CKEditor 5的API和插件系统。例如,可以创建一个新的插件来扩展...

    ckeditor文件上传功能

    ckeditor文件上传功能,附图片上传示例,java程序及返回结果。 strut配置 &lt;param name="allowedTypes"&gt;image/bmp||image/png||image/gif||image/jpeg||image/jpg||image/pjpeg&lt;/param&gt; ...

    CKEditor全部弄能插件

    CKEditor是一款广泛应用于Web开发中的开源富文本编辑器,它为用户提供了一种在网页上创建、编辑和格式化内容的强大工具。在JavaWeb项目中,CKEditor常常被用来提升用户在网页上的输入体验,比如在论坛、博客或者内容...

    ckeditor 行间距插件

    "ckeditor 行间距插件"就是专门为CKEditor设计的一个增强功能,旨在让用户能够更加灵活地调整文本的行间距,以满足不同设计需求。 CKEditor 的行间距插件通常包含以下几个核心知识点: 1. **安装与集成**:首先,...

    ckeditor和ckfinder简单功能

    1. 下载并安装CKEditor和CKFinder:首先,从官方网站下载这两个组件的最新版本,然后按照官方文档的指示进行安装。 2. 集成CKFinder:在ASP.NET项目中配置CKFinder,设置服务器路径、访问权限等参数,确保CKFinder...

    ckeditor_4.1.2_standard+ckeditor_aspnet_3.6.4

    CKEditor ASP.NET 版本为 .NET 开发者提供了一种简便的方式将 CKEditor 集成到他们的 ASP.NET 项目中,使得用户可以在Web表单上进行富文本编辑,同时保持服务器端的控制和数据处理能力。 集成 CKEditor ASP.NET,...

    CKeditor v3.2.1 JSP增强版 - 【带Servlet上传功能+完整源码+实例】.rar

    CKeditor v3.2.1 JSP增强版是一款专为Java Web开发者设计的富文本编辑器,它在标准的CKeditor 3.2.1版本基础上进行了特定的JSP优化和扩展,添加了Servlet上传功能,使用户在网页上编辑文本时能够方便地上传图片和...

    ckeditor for java 上传图片功能

    总之,将CKEditor集成到Java Web应用中并实现图片上传功能,需要前后端协同工作。前端负责用户交互和图片数据的发送,后端则负责接收数据、处理上传请求、保存图片并返回响应。在实际开发过程中,还需要考虑性能、...

    富客户端编辑器ckeditor与ckfinder结合

    富客户端编辑器CKEditor是一款广泛应用于网页和应用程序中的文本编辑工具,它提供了丰富的文本格式化选项,让用户在网页上能够享受到类似桌面应用的编辑体验。CKFinder则是一个配套的文件管理器,主要用于处理...

    springmc ckeditor ckfinder三者整合

    Spring MVC通过DispatcherServlet作为前端控制器,负责接收请求、分发到相应的处理器,并将结果返回给客户端。此外,Spring MVC还支持数据绑定、模型-视图-适配器模式、拦截器、异常处理等特性,极大地提高了开发...

    ckeditor整合webupload插件+后台接口代码

    在这个场景中,我们将讨论如何整合WebUpload插件与CKEditor,以实现文件上传功能,并涉及后台接口的实现。 首先,WebUpload是由百度开源的一个前端文件上传组件,它支持多文件选择、断点续传、预览、进度条等功能,...

    CKEditor编辑器行高插件

    5. 使用:一旦插件启用,用户可以在CKEditor的工具栏中找到行高相关的图标或菜单项,选择合适的行高值进行设置。 行高插件通常提供预设的行高值,如1倍、1.5倍、2倍等,同时也可能支持自定义行高。用户可以根据需要...

    extjs 嵌入 ckeditor 例子

    - 如果有特殊需求,如上传图片、插入链接等,可以利用CKEditor的插件系统扩展功能。 - 对于错误处理和用户提示,要确保有良好的反馈机制。 综上所述,将CKEditor嵌入到ExtJS应用中涉及对两个库的理解以及组件化开发...

    CKEditor3.0稳定版

    首先,CKEditor 3.0 强化了文本格式化功能,允许用户轻松地进行段落调整、字体样式设置、颜色选择、列表创建以及文本对齐等操作。这些功能使得CKEditor不再只是一个简单的输入框,而是能够提供接近桌面文字处理软件...

    ckeditor-5 已增加调整行高

    在本文中,我们将深入探讨ckeditor-5这一强大的富文本编辑器的最新更新——“已增加调整行高”功能。ckeditor-5是互联网上广泛使用的文本编辑工具,它以其用户友好的界面和丰富的功能集而备受赞誉。这次更新为用户...

    CKEditor2.6.rar

    CKEditor 2.6 版本是该编辑器的一个重要里程碑,它在前一版本的基础上进行了多方面的改进和优化,提升了用户体验和功能性。 首先,我们来了解一下 CKEditor 的核心功能。CKEditor 提供了完整的文字编辑功能,包括...

    ckeditor4.0 最新版本

    综上所述,CKEditor 4.0 最新版本不仅提供了一个功能强大且易于定制的文本编辑环境,还充分考虑了现代Web开发的需求,无论是对于个人网站还是企业级应用,都是一个值得信赖的选择。通过下载压缩包中的"ckeditor"文件...

Global site tag (gtag.js) - Google Analytics