zoukankan      html  css  js  c++  java
  • ckeditor3.6.4+ckfinder2.2.2 上传图片到指定目录

      目前正在学习mvc,正在做一个个人博客的网站,其中有关于文章的操作,所以加上了富文本编辑器。我目前使用的编辑器是ckeditor3.6.4+ckfinder2.2.2。

      今天用编辑器上传图片,弄了N久。发现上传图片的时候,就直接上传到服务器,最终提交内容时候,就把内容直接提交。但是总有那么种情况,万一内容提交不成功,那之前上传的图片不就在服务器成了垃圾了么。但是这个问题目前还没解决,求高人指点,在什么时候扫描一下BaseUrl = "<图片上传时,图片存放的位置>";!然后清除这些无用的图片。

      在网上百度了,说ckfinder可以修改config.ascx中的BaseUrl来修改上传图片存放的位置,但是我想动态的、根据不同情况来使上传的图片放在不同的位置。然后去弄弄了ckfinder,没有文档,看得晕头转向的。心想,自己写段代码来操作服务器上的上传文件算了。

      目前仅仅是解决了将上传的图片存放到指定的目录,并且修改ckeditor内容中的图片链接。对于多用户的个人网站来说,可能需要将用户的图片分类存放,而且还要改名(还没有什么大型个人网站的开发经验,也不知道自己的想法对不对,求各位前辈帮忙指正)。

      先上代码,恳请各位帮忙指出不足。拜谢。。

    action:Default

    Action Default
     1 [HttpPost]
     2         public ActionResult Default(Article article)
     3         {
     4             string ss = article.ArticleContent;
     5 
     6             //新文件夹的路径
     7             string filenewpath = Request.PhysicalApplicationPath + "Content\\ss\\";
     8            
     9             ss = RepleaceImg(ss, filenewpath);
    10 
    11             Response.Write(ss);
    12 
    13             return Content("<script language=\"javascript\">{alert(\"sss\");location.href=\"/Home/Default\";}</script>");
    14 //有点懒,没有单独做个页面用于显示文章内容,当时就想快些调试好。
    15         }

       这里说一下,Article是自定义的一个类,属性ArticleContent用了[skipValidation]。由于目前学得还不深,我不会设置安全验证,如果在Default中使用FormCollection ,加上[validationInput(false)],在web.config中设置<httpRuntime>也试过,一直说我提交的Request.Form[""]存在安全隐患。求前辈们给些指点。。RepleaceImg()是自定义函数,用于替换ArticleContent中<img >的src。

      RepleaceImg的代码

    RepleaceImg
     1 private string RepleaceImg(string content, string filenewpath)
     2         {
     3             //新文件名列表
     4             List<string> lsImageNewName = new List<string>();
     5             //暂存文件名列表
     6             List<string> lsImageNameTemp = new List<string>();
     7             //ArticleContent中的图片地址列表,将要替换的文件名
     8             List<string> lsImageOleName = new List<string>();
     9 
    10             //将要替换的文件名
    11             string filename = "";
    12             //文件上传的路径
    13             string filepath = "";
    14             //将要移动到的文件目录路径
    15             //string filenewpath = "";
    16             //新文件名
    17             string filenewname = "";
    18             //获取上传文件的路径,含文件名以及扩展名
    19             string temp = "";
    20 
    21             //文章内容中有图片
    22             if (content.IndexOf("src=\"") != -1)
    23             {
    24                 GetFilePath(content, lsImageOleName);
    25             }
    26 
    27             //上传的图片所存放的位置
    28             filepath = Request.PhysicalApplicationPath + "Content\\images\\images";
    29            
    30             if (!Directory.Exists(filenewpath))
    31             {
    32                 Directory.CreateDirectory(filenewpath);
    33             }
    34             //移动filepath中图片到filenewpath中。并且修改图片的文件名
    35             filenewname = "";
    36             if (Directory.Exists(filepath))
    37             {
    38                 foreach (string d in Directory.GetFileSystemEntries(filepath))
    39                 {
    40                     if (System.IO.File.Exists(d))
    41                     {
    42                         string strExtension = System.IO.Path.GetExtension(d);
    43                         filenewname = filenewpath + DateTime.Now.ToString("yyyymmddhhssmmfff");
    44                         System.IO.File.Move(d, filenewname + strExtension);
    45                         lsImageNameTemp.Add(filenewname + strExtension);
    46                     }
    47                 }
    48             }
    49 
    50             //替换,将文件图片的路径改成,<img>能够识别的路径
    51             filenewname = "";
    52             foreach (string m in lsImageNameTemp)
    53             {
    54                 filenewname = "http://www.cnblogs.com/Content/ss/" + m.Substring(m.LastIndexOf("\\") + 1, m.Length - m.LastIndexOf("\\") - 1);
    55                 lsImageNewName.Add(filenewname);
    56             }
    57 
    58             int count = 0;
    59             foreach (string nametemp in lsImageOleName)
    60             {
    61                 try
    62                 {
    63                     content = content.Replace(nametemp, lsImageNewName[count]);
    64                 }
    65                 catch (Exception ex)
    66                 {
    67                     break;
    68                 }
    69                 finally
    70                 {
    71                     count++;
    72                 }
    73 
    74             }
    75 
    76             return content;
    77         }

    GetFilePath的代码

    GetFilePath
     1  private void GetFilePath(string content,List<string> lsImageName)
     2         {
     3             string temp = "";
     4 
     5             if (content.IndexOf("src=\"") != -1)
     6             {
     7                 temp = content.Substring(content.IndexOf("src=\"") + 5, content.IndexOf("jpg\"") - content.IndexOf("src=\"") - 2);
     8                 lsImageName.Add(temp);
     9 
    10                 //截取剩下的字符串
    11                  string qqq = content.Substring(content.IndexOf("jpg\"") + 4);
    12                  GetFilePath(qqq, lsImageName);
    13             }
    14             else
    15             {
    16                 return;
    17             }
    18         }

    在编辑这段代码的时候就没有考虑全面,后来回想起,还有种情况:如果内容中出现这样的情况改怎么办

    <script src=\"xxxx\">{document.GetElementById(\"img\").src=\"xxxx.jpg\"}</script>,但没有<img src=\"xxxx.jpg\">。

    如果是这样的情况,这段代码也会认为内容中存在图片,处理起来应该会出现错误。恳请各位在百忙中抽那么一小点时间,给菜鸟我些指点。拜谢。。

    如果各位对这段代码有疑问的,可以尽管提出来,我会尝试去回答。


    2012-08-10

          白天的时候进行了尝试,当在ckeditor中输入<script src=\"xxxx\">{document.GetElementById(\"img\").src=\"xxxx.jpg\"}</script>的时候,ckeditor会将这段代码给编码,里面的"<"、">"、"""都分别转成&lt;、&gt;、&quot;。这样string.indexof("src=\"")应该只会寻找<img>中的src了。

        另外,在RepleaceImg 函数中重新修改了下代码。在if(!content.indexof("src=\"")!=-1)的时候才执行后续代码,如不哦没有,则直接返回content。ps:在自己的电脑上编辑的,但是现在没有将源码拷贝出来,所有没有粘上最新代码,也没有附上实验结果,不能很好的说明结果,请见谅。。

  • 相关阅读:
    小程序动态修改页面标题setNavigationBarTitle
    webapi发布在iis之后报错Http 403.14 error
    vue调用子组件方法时,参数传不过去
    Echarts中X轴坐标太密集,分段显示
    使用echarts时,鼠标首次移入屏幕会闪动,全屏会出现滚动条
    js关于数组的操作(合并数组、添加数组、循环等)
    在vue项目中使用echarts
    npm i安装命令中的-g -D -S的区别
    ArcGIS api for JS 实现三维飞行漫游功能
    Vue通过EventBus实现兄弟组件间通信
  • 原文地址:https://www.cnblogs.com/CaDevil/p/2630885.html
Copyright © 2011-2022 走看看