黄兵的个人博客

summernote asp.net mvc实现图片上传

我自己的博客后采用的是asp.net mvc 5，富文本编辑器使用的是summernote编辑器。

在群里面经常有人问怎么在asp.net mvc里面使用summernote编辑器，借着这个机会我共享出我实际项目的代码。

首先看一下引入的文件：

@section css{
    @Styles.Render("~/Content/summernote/css/codemirror.css",
    "~/Content/summernote/css/monokai.css", 
    "~/Content/summernote/dist/summernote-bs3.css",
    "~/Content/summernote/dist/summernote.css")
}
@section scripts{
    @Scripts.Render("~/Content/summernote/dist/summernote.min.js") ;
    @Scripts.Render("~/Content/summernote/dist/lang/summernote-zh-CN.min.js");
    @Scripts.Render("~/Content/summernote/summernote-initialization.js")
}

当然上面的文件非必须引入，有一些是我项目上需要的。

summernote-zh-CN.min.js 和  summernote-zh-CN.min.js 必须引入，这个是项目主要文件。

summernote.css 和 summernote-bs3.css也必须要引入。

看一下初始化文件：

$(document).ready(function () {
    $('.summernote').summernote({
        lang: 'zh-CN',
        minHeight: 400,
        tabsize: 2,
        disableDragAndDrop: false,
        dialogsInBody: true,
        dialogsFade: true,
        ace: {
            aceTheme: 'ace/theme/dawn',
            aceMode: 'c_cpp',
            aceLineHeight: '32px',
            aceFontSize: '16px',
            aceModeSelectorLabel: 'select your language',
            aceCodeInputAreaLabel: 'input your code',
            aceCodeSubmitBtnLabel: 'Insert',
            aceModalTitle: 'Insert Code',
            aceModes: [
                'c/c++', 'java', 'javascript','css','html', 'perl', 'python', 'php', 'ruby',
                'sh', 'golang', 'julia', 'rust', 'scala', 'haskell', 'lisp', 'lua', 'sql',
                'coffee', 'typescript'
            ],
        },
        codemirror: { // codemirror options
            lineNumbers: true,
            matchBrackets: true,
            styleActiveLine: true,
            theme: "ambiance"
        },
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']],
            ['myplugin', ['aceCodeEditor']]
        ],
        
        callbacks: {
            onImageUpload: function (files, editor, welEditable) {
                sendFile(files[0], editor, welEditable);
            }
        }
    }); 
});


//文件上传
function sendFile(file, editor, welEditable) {
    var data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        processData: false,
        contentType: false,
        cache: false,
        url: '/Manage/UploadImages',
        success: function (url) {
            $('.summernote').summernote('insertImage', url);         
        }
    });
};

一些常规设置，没什么好说的，不懂看官方文档。

绑定页面代码如下：

<div class="ibox-content no-padding">
    @Html.TextAreaFor(model => model.Body, new { @class = "form-control note-codable summernote" })
    @Html.ValidationMessageFor(model => model.Body, "", new { @class = "text-danger" })
</div>

好了前端就是这些，没有什么特别的。有什么问题进群问。

看一下后台接受上传图片的代码：

[HttpPost]
public ActionResult UpLoadImages(HttpPostedFileBase file)
{
    if (file != null)
    {
        for (int i = 0; i < Request.Files.Count; i++)
        {
            var files = Request.Files[i];
            var fileName = Path.GetFileName(file.FileName);
            string fileType = Path.GetExtension(file.FileName);
            //获取上传文件的后缀   
            if (fileName != "")
            {
                string newName = DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() +
                    DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() +
                    DateTime.Now.Second.ToString() + DateTime.Now.Millisecond.ToString() + fileType;
                //更改上传文件名   
                string Currentpath = Server.MapPath("/Images/UpLoadImages");
                CreateDirectory ImgDr=new CreateDirectory();
                ImgDr.CreatePath(Currentpath);
                var path = Currentpath + "\\" + newName;
                files.SaveAs(path);

                string RelativePath = "Images/UpLoadImages" + "/" + newName;

                GetUrl url = new GetUrl();

                string retPath = url.GetUrlStr().ToString() + RelativePath;

                return Content(retPath);
            }
        }
    }
    return View();
}

这个代码有点问题，没有过滤上传文件的类型。主要是我自己的博客，自己用没有考虑太多。在实际项目中要注意这个问题。

有什么问题进QQ群问：

群号：127375427

我的项目地址（github）：我的个人博客源码

summernote的项目下载地址：https://github.com/summernote/summernote/releases/download/v0.8.4/summernote-0.8.4-dist.zip

如果使用的是java请参考这里：summernote Java实现图片上传