Home > Backend Development > C#.Net Tutorial > .NET MVC uses ueditor to upload pictures

.NET MVC uses ueditor to upload pictures

高洛峰
Release: 2016-11-21 14:25:58
Original
1872 people have browsed it

ueditor version: 1.4.3

File reception processing is written in the controller, and the ashx provided by the editor is not used to receive uploaded files

Editor instantiation, because the required editor functions of different pages are different, instantiation When passing in the configuration parameters:

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");
Copy after login

serverUrl is the upload address, which is the action in the controller. The two colons cannot be removed. For example:

noCache=1477646749295. So it is correct to change the serverUrl to '../UploadImage'

action code:

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 };
        }
Copy after login

There is a pitfall in editing and receiving the returned json. If the returned one is

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

an error will be reported when uploading the image: errorHandler is not defined(...)

It is normal to return to

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

The following postures are used to return json:

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 };
Copy after login

1, 3, 5. The returned json is displayed in the browser as

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

Others are

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


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template