博客

ASP.NET MVC实现单个图片上传、限制图片格式与大小并在服务端裁剪图片

  • Post category:C#

ASP.NET MVC是一种流行的Web应用程序框架，可以用于构建功能强大的Web应用程序。在ASP.NET MVC中实现单个图片上传、限制图片格式与大小并在服务端剪图片，需要执行以下步骤：

步骤1：创建MVC项目

在Visual Studio中创建一个新的ASP.NET MVC项目。

步骤2：上传视图

在Views文件夹中创建一个名为Upload的文件夹，并在其中创建一个名为Index.cshtml的视图。在视图中添加以下HTML代码：

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
}

这个视图包含一个文件上传表单，它将文件上传到Home控制器的Upload方法。

步骤3：创建上传控制器

在Controllers文件夹中创建一个名为HomeController的控制器，并添加以下代码：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Upload(HttpPostedFileBase file)
    {
        if (file != null && file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var fileExtension = Path.GetExtension(fileName);
            var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif" };
            var allowedSize = 1024 * 1024 * 2; // 2MB

            if (allowedExtensions.Contains(fileExtension.ToLower()) && file.ContentLength <= allowedSize)
            {
                var filePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
                file.SaveAs(filePath);

                // TODO: Crop image

                return RedirectToAction("Index");
            }
            else
            {
                ModelState.AddModelError("", "Invalid file format or size.");
            }
        }

        return View("Index");
    }
}

这个控制器包含一个名为Upload的HttpPost方法，它接受一个HttpPostedFileBase对象，该对象包含上传的文件。在方法中，我们首先检查文件是否存在并且大小是否小于或等于2MB。然后，我们检查文件扩展名是否为.jpg、.jpeg、.png或.gif。如果文件格式和大小都符合要求，我们将文件保存到Uploads文件夹中，并重定向到Index视图。否则，我们将错误消息添加到ModelState中，并返回Index视图。

步骤4：裁剪图片

在Upload方法中，我们需要添加代码来裁剪上传的。我们可以使用ImageMagick库来裁剪图片。以下是一个简单的裁剪方法：

private void CropImage(string filePath, int width, int height)
{
    using (var image = new MagickImage(filePath))
    {
        image.Resize(width, height);
        image.Crop(width, height, Gravity.Center);
        image.Write(filePath);
    }
}

这个方法接受一个文件路径、宽度和高度，并使用ImageMagick库来裁剪图片。可以在Upload方法中调用这个方法来裁剪上传的图片。

示例1：上传单个图片并裁剪

假设我们要上传一个名为test.jpg的图片，并将其裁剪为200×200像素。我们可以使用以下代码：

“`csharp[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var fileExtension = Path.GetExtension(fileName);
var allowedExtensions = new[] { “.jpg”, “.jpeg”, “.png”, “.gif” };
var allowedSize = 1024 * 1024 * 2; // 2MB

    if (allowedExtensions.Contains(fileExtension.ToLower()) && file.ContentLength <= allowedSize)
    {
        var filePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
        file.SaveAs(filePath);

        CropImage(filePath, 200, 200);

        return RedirectToAction("Index");
    }
    else
    {
        ModelState.AddModelError("", "Invalid file format or size.");
    }
}

return View("Index");

}


这个代码将上传的图片保存到Uploads文件夹中，并将其裁剪为200x200像素。

## 示例2：上传多个图片并裁剪

假设我们要上传多个图片，并它们裁剪为200x200像素。我们可以使用以下代码：

```html
@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="file" name="files" multiple />
    <input type="submit" value="Upload" />
}

这个代码将允许我们上传多个图片。

[HttpPost]
public ActionResult Upload(IEnumerable<HttpPostedFileBase> files)
{
    foreach (var file in files)
    {
        if (file != null && file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var fileExtension = Path.GetExtension(fileName);
            var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif" };
            var allowedSize = 1024 * 1024 * 2; // 2MB

            if (allowedExtensions.Contains(fileExtension.ToLower()) && file.ContentLength <= allowedSize)
            {
                var filePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
                file.SaveAs(filePath);

                CropImage(filePath, 200, 200);
            }
            else
            {
                ModelState.AddModelError("", "Invalid file format or size.");
            }
        }
    }

    return RedirectToAction("Index");
}

这个代码将允许我们上传多个图片，并将它们保存到Uploads文件夹中，并将它们裁剪为200×200像素。

Tags: