ASP.NET MVC 4.0 CKEditor jquery 文章管理 图片上传 解决方案

文章修改，新增业务的C#代码

[HttpPost]

        [ValidateInput(false)]

        public ActionResult AddNew(FormCollection values)

        {

            var db = new ddrDBEntities();

            XinWen obj = new XinWen();

            if (!string.IsNullOrEmpty(Request["id"]))

            {

                var id = Guid.Parse(Request["id"]);

                obj = db.XinWen.Where(m => m.Id == id).FirstOrDefault();

            }

            else

            {

                obj.Id = Guid.NewGuid();

                db.XinWen.AddObject(obj);

            }

            obj.BiaoTi = values["BT"];

            obj.NeiRong = values["NR"];

            obj.ShiJian = DateTime.Now;

            var pics = Request["filesHidden"].Split("#".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);

            foreach (var pic in pics)

            {

                db.TuPian.Where(m => m.LuJing == pic).ToList().ForEach(m =>

                {

                    m.FId = obj.Id;

                });

            }

            db.SaveChanges();

            db.Dispose();

            return Redirect("/admin/news/");

        }

文章修改，新增业务的cshtml代码

@model ddr.Models.XinWen

@{

    ViewBag.Title = "德迪尔电器有限公司-后台管理-新闻";

    Layout = "~/Views/Shared/_AdminLayout.cshtml";

}

<script type="text/javascript" src="/CONTENT/CK/ckeditor.js"></script>

<script type="text/javascript" src="/CONTENT/CK/adapters/jquery.js"></script>

<script>

    var g_blnCheckUnload = false;

    function BypassCheck() { g_blnCheckUnload = true; }

    window.onbeforeunload = function () { if (g_blnCheckUnload) return ("确认离开当前页面吗？未保存的数据将会丢失！"); }

    $(function () {

        var config = {

            height: 500

        };

        $('.ckeditor1').ckeditor(config);

        var pics = '@ViewBag.Pics';

        if(pics.length>0){

            $("#filesHidden").val(pics);

            setText();

        }

    });

    function valChange(fn) {

        var val = $("#filesHidden").val();

        $("#filesHidden").val(val + "#" + fn);

        var v = $(".ckeditor1").val();

        $(".ckeditor1").val(v + "<img src='/content/wj/" + fn + "' style='border:0px;' />");

        setText();

    }

    function setText() {

        $("#files").empty();

        var arr = $("#filesHidden").val().split('#');

        var str = '';

        for (var i = 0; i < arr.length; i++) {

            if (arr[i].length > 0) {

                str += "<div class=" + arr[i] + "><a href='/content/wj/" + arr[i] + "' target='_blank'>" + arr[i] + "</a>    ";

                str += "<a href=\"javascript:delfile(\'" + arr[i] + "\');\">删除该图片</a></div>";                

            }

        }

        $("#files").append(str);

    }

    function delfile(p) {

        g_blnCheckUnload = false;

        $.getJSON("/file/delfile/?fn=" + p, function (data) {

            if (data["flag"] == true) {

                var val = $("#filesHidden").val();

                $("#filesHidden").val(val.replace('#' + p, ""));

                var v = $(".ckeditor1").val();

                $(".ckeditor1").val(v.replace('<img src="/content/wj/' + p + '" style="border:0px;" />', ""));

                setText();

            }

        });

    }

</script>

<div style="margin-right: 60px; margin-left: 60px; text-align: left;">

    <form action="/admin/addnew/?id=@Request["id"]" method="post">

    <input type="text" name="BT" style="width: 100%;" value="@(Model == null ? "" : Model.BiaoTi)" /><br />

    <div id="files">

    </div>

    <input type="hidden" name="filesHidden" id="filesHidden" />

    <iframe src="/file/" style="height:30px; border:0px;" frameborder="0" width="100%"></iframe>

    <textarea class="ckeditor1" name="NR">

    @(Model == null ? "" : Model.NeiRong)

</textarea>

    <div style="text-align: center;">

        <input onclick="BypassCheck; return true;" type="submit" value="提交" style="width: 120px;" />

        <input type="reset" value="重置" style="width: 120px;" />

    </div>

    </form>

</div>

图片上传IFRAME的C#代码

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.IO;

using ddr.Models;



namespace ddr.Controllers

{

    public class FileController : Controller

    {

        //

        // GET: /File/



        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult AddFile(HttpPostedFileBase wj)

        {

            string sn = string.Empty;

            if (wj != null)

            {

                if (wj.ContentLength > 0)

                {

                    sn = wj

                        .FileName

                        .Insert(wj.FileName.LastIndexOf('.'), "-"+DateTime.Now.ToString("yyyyMMddhhmmss"));

                    sn = Path.Combine(Server.MapPath("/Content/WJ"), sn);

                    wj.SaveAs(sn);



                    var db = new ddrDBEntities();

                    var obj = new TuPian();

                    obj.Id = Guid.NewGuid();

                    obj.LuJing = Path.GetFileName(sn);

                    db.TuPian.AddObject(obj);

                    db.SaveChanges();

                    db.Dispose();

                }

            }

            return Redirect("/file/?fn=" + Path.GetFileName(sn));

        }



        public JsonResult DelFile()

        {

            var fn = Request["fn"];

            if (!string.IsNullOrEmpty(fn))

            {

                var db = new ddrDBEntities();

                var obj = db.TuPian.Where(m => m.LuJing == fn).FirstOrDefault();

                db.TuPian.DeleteObject(obj);

                db.SaveChanges();

                db.Dispose();

                fn = Path.Combine(Server.MapPath("/Content/WJ"), fn);

                var fi = new FileInfo(fn);

                fi.Delete();

            }

            var result = new JsonResult();

            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            result.Data = new { flag = true };

            return result;



        }



    }

}

图片上传IFRAME的cshtml代码

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <title>德迪尔电器</title>

    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

    <script>

        $(function () {

            var fn = '@(Request["fn"])';

            if (fn.length > 0) {

                parent.valChange(fn);

            }

        });

    </script>

</head>

<body style="margin: 0px; padding: 0px; background: #e8e8e8; border: 0px;">

    <form method="post" action="/file/AddFile/" enctype="multipart/form-data">

    <input type="file" name="wj"  />

    <input type="submit" value="上传" />

    </form>

</body>

</html>