ASP.NET MVC5中使用CKEditor实现图片上传的技术求助

Hey there, let's get your CKEditor image upload functionality up and running smoothly. I’ve tackled this exact scenario before, so here’s a step-by-step guide that should work for your project:

1. Install CKEditor #

First, get CKEditor into your project. You have two easy options:

• NuGet Package Manager: Open the Package Manager Console and run:

  Install-Package CKEditor
  

• Manual Download: Grab the latest CKEditor package, extract the files, and drop them into your project (e.g., ~/Scripts/ckeditor/).

2. Set Up CKEditor in Your View #

In the view where you want to use CKEditor (like a create/edit form), add the CKEditor script reference and initialize it with upload configuration:

<script src="~/Scripts/ckeditor/ckeditor.js"></script>

<textarea id="Content" name="Content"></textarea>

<script>
    CKEDITOR.replace('Content', {
        filebrowserImageUploadUrl: '@Url.Action("ImageUpload", "Upload")', // Point to your upload action
        filebrowserUploadMethod: 'form'
    });
</script>

Note: Replace Content with your textarea's ID/name, and adjust the controller/action names if you use different ones.

3. Create an Upload Controller #

Next, make a controller to handle the image upload. Let's call it UploadController:

using System;
using System.IO;
using System.Web;
using System.Web.Mvc;

public class UploadController : Controller
{
    // Handle image upload from CKEditor
    [HttpPost]
    public ActionResult ImageUpload(HttpPostedFileBase upload)
    {
        // Validate the upload
        if (upload == null || upload.ContentLength <= 0)
        {
            return Json(new { uploaded = 0, error = new { message = "No file selected or file is empty." } });
        }

        // Validate file type (only allow images)
        var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif" };
        var fileExtension = Path.GetExtension(upload.FileName).ToLower();
        if (!Array.Exists(allowedExtensions, ext => ext == fileExtension))
        {
            return Json(new { uploaded = 0, error = new { message = "Only JPG, PNG, and GIF files are allowed." } });
        }

        // Define upload path (create directory if it doesn't exist)
        var uploadPath = Server.MapPath("~/Content/Uploads/Images/");
        if (!Directory.Exists(uploadPath))
        {
            Directory.CreateDirectory(uploadPath);
        }

        // Generate a unique file name to avoid overwrites
        var fileName = Guid.NewGuid().ToString() + fileExtension;
        var filePath = Path.Combine(uploadPath, fileName);

        // Save the file to server
        upload.SaveAs(filePath);

        // Generate the URL for CKEditor
        var fileUrl = Url.Content("~/Content/Uploads/Images/" + fileName);

        // Return CKEditor-compatible JSON response
        return Json(new { uploaded = 1, url = fileUrl });
    }
}

4. Integrate with EF Code First (Optional) #

If you want to track uploaded images in your database using EF Code First, create an Image entity:

using System;
using System.ComponentModel.DataAnnotations;

public class Image
{
    [Key]
    public int Id { get; set; }
    public string FileName { get; set; }
    public string FileUrl { get; set; }
    public DateTime UploadDate { get; set; } = DateTime.Now;
}

Then update your DbContext to include the DbSet:

public class YourDbContext : DbContext
{
    public DbSet<Image> Images { get; set; }
    // Other DbSets...
}

Modify the ImageUpload action to save the image record to the database:

// Add this inside the ImageUpload action after saving the file
using (var db = new YourDbContext())
{
    var image = new Image
    {
        FileName = fileName,
        FileUrl = fileUrl
    };
    db.Images.Add(image);
    db.SaveChanges();
}

5. Important Notes #

• Directory Permissions: Ensure the ~/Content/Uploads/Images/ directory has write permissions for the application pool user.
• Security: For production, add more validation (e.g., check file size limits, validate file headers to prevent fake image files).
• Authorization: If your app uses authentication, add [Authorize] attribute to the ImageUpload action to prevent unauthorized uploads.

Let me know if you run into any issues—whether it's configuration quirks, EF integration problems, or permission errors, I’m here to help!

内容的提问来源于stack exchange，提问作者Emad