用ssh，加插件ckeditor,完成文件图片上传

最新推荐文章于 2022-04-10 23:56:19 发布

chuannaoshan4792

最新推荐文章于 2022-04-10 23:56:19 发布

阅读量110

点赞数

文章标签：运维 javascript java ViewUI

原文链接：https://my.oschina.net/u/2525325/blog/680476

版权

前台页面，要调用ckeditor的插件跳转到后台。

<script type="text/javascript">
        var editor;
    window.onload = function(){
        editor = CKEDITOR.replace('content',
             {
         toolbar : 'Diy',
         filebrowserImageUploadUrl: "${pageContext.request.contextPath}/news/newsFile"
          }    ); 
    }

</script>

保留插件的方式不同使用方式有所不同，不过大致都是要跳转到后台。

后台是用SpringMVC做的

	@RequestMapping(value="/newsFile", method= RequestMethod.POST)
	public String newFile(HttpServletResponse response, HttpServletRequest request,MultipartFile upload) throws Exception{
	        String realpath=request.getSession().getServletContext().getRealPath("images/upload");
            String uploadContentName = upload.getOriginalFilename();
            String newFileName = StringUtil.getRandomString(); 
	        File  file=new File(realpath + "/" + uploadContentName);
	        response.setCharacterEncoding("UTF-8");  
	        PrintWriter out = response.getWriter();  
	        // CKEditor提交的很重要的一个参数  
	        String callback = request.getParameter("CKEditorFuncNum");   
	        String fileName = file.getName();
	        String prefix = fileName.substring(fileName.lastIndexOf(".")+1);
	        
	        String expandedName = FileUploadUtils.getImagePrefix(prefix); //文件扩展名  

            //这里是为了能反映图片到界面
	        if (expandedName == null) {
	            out.println("<script type=\"text/javascript\">");    
	            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'" + springMssageSource.getMessage("common.fileUpload.prefixIncorrect", null, LocaleContextHolder.getLocale()) + "');");   
	            out.println("</script>");  
	            return null;  
	        }  
	        
            //这里是为了能反映图片到界面+1
	        long maxImageLength = NumberUtil.toLong(ContextConfigUtil.getInstance().getProperty("UPLOAD_IMAGE_MAX_LENGTH"));
	        if(file.length() > maxImageLength){  
	            out.println("<script type=\"text/javascript\">");    
	            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'" + springMssageSource.getMessage("common.fileUpload.maxFileSize", null, LocaleContextHolder.getLocale()) + "');");   
	            out.println("</script>");  
	            return null;  
	        }  
	        String sysFileUrl = ContextConfigUtil.getInstance().getProperty("SYS_UPLOAD_IMAGE_URL");
	        String localUrl=ContextConfigUtil.getInstance().getProperty("NEWS_LOGO_FOLDER");
	        //这是写在一起的url，address + newFileName + expandedName，为本地路径，可为服务器地址
            String address=sysFileUrl+localUrl;
	        File localImage=new File(address + newFileName + expandedName);
	        
            //文件上传最重要的方法。
	        FileUtils.copyInputStreamToFile(upload.getInputStream(), localImage);
	        
	        // 返回“图像”选项卡并显示图片  
            out.println("<script type=\"text/javascript\">"); 
            out.println("parent.document.getElementById('cke_63_textInput').value = '" + request.getContextPath() + "/loadImage?imageName=" +"news/"+ newFileName + expandedName + "'");
            out.println("console.log(parent.document.getElementById('cke_57_previewImage').style.width)");
            out.println("parent.document.getElementById('cke_57_previewImage').src = '" + request.getContextPath() + "/loadImage?imageName=" + "news/"+ newFileName + expandedName + "'");
            out.println("parent.document.getElementById('cke_57_previewImage').style.display = 'inline-block'");
            out.println("</script>");  
	        return null;  
	    }