.NET MVC 使用ueditor上传图片


本文摘自PHP中文网,作者小葫芦,侵删。

ueditor版本:1.4.3

文件接收处理写在controller,不使用编辑器提供的ashx接收上传文件

编辑器实例化,因为不同页面的所需编辑器功能是不一样的,实例化的时候传入配置参数:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

var editor = new baidu.editor.ui.Editor({

            toolbars: [["date", "time", "horizontal", "anchor", "spechars", "blockquote",

                       "pagebreak", "bold", "italic", "underline", "strikethrough", "forecolor",

                       "backcolor", "justifyleft", "justifycenter", "justifyright", "justifyjustify", "directionalityltr", "directionalityrtl", "indent", "removeformat", "autotypeset", "formatmatch", "pasteplain"],

            ["customstyle", "paragraph", "rowspacingbottom", "rowspacingtop", "lineheight", "fontfamily", "fontsize", "imagenone",

            "inserttable", "deletetable", "mergeright", "mergedown", "splittorows"],

            ["splittocols", "splittocells", "mergecells", "insertcol", "insertrow", "deletecol", "deleterow",

              "insertparagraphbeforetable", "fullscreen", "source", "undo", "redo", "insertunorderedlist",

            "insertorderedlist", "unlink", "link", "cleardoc", "selectall", "searchreplace", "separate", 'simpleupload']

                 

            ],

            serverUrl: '../UploadImage'

        });

        editor.render("Content");

serverUrl为上传地址,即controller里的action,两个冒号不能去掉。举个栗子:

noCache=1477646749295。所以serverUrl改为'../UploadImage'才是正确的

action代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

public ActionResult UploadImage()

        {

            var action = Request["action"];

            var json = "";

            if (action == "config")

            {

                json =@"{""imageActionName"":""UploadImage"",""imageFieldName"": ""upfile"",""imageCompressEnable"":""true"",""imageCompressBorder"": 1600,""imageInsertAlign"": ""none"",""imageUrlPrefix"": """",""imageAllowFiles"": ["".png"", "".jpg"", "".jpeg"", "".gif"", "".bmp""]}";

            }

            else

            {

                var file= Request.Files["upfile"];

                var relativePath = AppConfig.GetAppSettingsValue("CustomizeProductMaskImageRelativePath");

                 

                var newFileName = string.Concat(DateTime.Now.ToString("yy-MM-dd"), Path.GetExtension(file.FileName));

                var savePath = Server.MapPath(relativePath);

 

                if (!Directory.Exists(savePath))

                {

                    Directory.CreateDirectory(savePath);

                }

 

                relativePath = Path.Combine(relativePath, newFileName);

 

                // 合成目标文件路径

                var srcFileName = FilePath.CombinePath(savePath, newFileName);

 

                // 保存图片

                file.SaveAs(srcFileName);

 

                var tvcMallImageUrl = "";

 

                // 上传图片到外网服务器

                tvcMallImageUrl = "";

                json = json + "{\"url\":\"" + tvcMallImageUrl+"\",";

                json = json + "\"state\":\"SUCCESS\"}";

            }

             

            return  new ContentResult { ContentEncoding = Encoding.UTF8, ContentType = "application/json", Content = json };

        }

编辑接收返回json有一处坑,如果返回的是

1

"{\"imageActionName\":\"UploadImage\",\"imageFieldName\": \"upfile\",\"imageCompressEnable\":\"true\",\"imageCompressBorder\": 1600,\"imageInsertAlign\": \"none\",\"imageUrlPrefix\": \"\",\"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"]}"

上传图片的时候报错: errorHandler is not defined(…)

返回为

1

{"imageActionName":"UploadImage","imageFieldName": "upfile","imageCompressEnable":"true","imageCompressBorder": 1600,"imageInsertAlign": "none","imageUrlPrefix": "","imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]}

才正常

以下几种返回json的姿势:

1

2

3

4

5

return Content(json, "application/json", Encoding.UTF8);

return Json(json,"application/json",Encoding.UTF8,JsonRequestBehavior.AllowGet);

return JavaScript(json);

return new JsonResult() {ContentEncoding = Encoding.UTF8, ContentType = "application/json", Data = json,JsonRequestBehavior = JsonRequestBehavior.AllowGet};

return  new ContentResult { ContentEncoding = Encoding.UTF8, ContentType = "application/json", Content = json };

1、3、5返回json在浏览器显示为

1

{"imageActionName":"UploadImage","imageFieldName": "upfile","imageCompressEnable":"true","imageCompressBorder": 1600,"imageInsertAlign": "none","imageUrlPrefix": "","imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]}

其他的为

1

"{\"imageActionName\":\"UploadImage\",\"imageFieldName\": \"upfile\",\"imageCompressEnable\":\"true\",\"imageCompressBorder\": 1600,\"imageInsertAlign\": \"none\",\"imageUrlPrefix\": \"\",\"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"]}"

相关阅读 >>

.net core + angular cli 实现开发环境搭建

.net core2.0小技巧之memorycache问题修复解决的方法(图)

c#连接ftp时路径出现问题的解决方法

c#单例模式的实现以及性能对比的实例

25种.net开发不可错过的高效工具

.net多线程编程中的误用点分析

.net中json数据进行序列化和反序列化操作分析

c#中多线程之thread类详解

asp.net mvc 中获取当前url、controller、action图文实例

介绍c#中的堆和栈

更多相关阅读请进入《ueditor》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...