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>