使用 Razor 页面进行 JQuery 图片上传

Chilezie Reginald Unachukwu

2.85/5 (3投票s)

2018 年 1 月 3 日

CPOL

3分钟阅读

22995

本文将向您展示如何在新的 Razor Pages 模板中使用 JQuery/Dropzone 执行图像上传。

Razor Pages 是微软最近推出的，作为 asp.net 堆栈的一部分的酷炫的新项目模板。它可能是所有 asp.net 项目模板中最简单和最直接的。

今天，我将向您展示如何使用 Razor Pages 和 JQuery 执行基本的 jQuery 图像上传。您将看到这样做是多么容易。

有关使用 jQuery 和其他工具的图像上传方法的示例，请参阅 Cloudinary 的jQuery 图像和视频上传文档页面，使用 Zurb 上传，或 Dropzone 的各种实现。

必备组件

您的系统上安装了 dotnet cli。
您有一个支持 C# 的文本编辑器，例如 Visual studio code。

步骤

首先，让我们为我们的项目创建一个目录，并通过运行以下命令创建一个新的 Razor Pages 项目。

mkdir JqueryRazorImageUpload
cd JqueryRazorImageUpload
dotnet new razor

现在继续并恢复默认包。

dotnet restore

如果有效，很好。现在停止应用程序并在 Pages 文件夹中创建两个新文件。 ImageUpload.cshtml，它是页面视图，ImageUpload.cshtml.cs，它是页面模型。

//ImageUpload.cshtml.cs
using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace jqueryRazorpagesSimpleFileUpload.Pages
{
    public class ImageUploadModel : PageModel
    {
        public void OnGetAsync()
        {
        }
    }
}


<!-- ImageUpload.cshtml-->
@page
@model ImageUploadModel
<h1>Image Upload Page </h1>

现在转到打开 _Layout.cshtml 并将您的新页面添加到导航栏。它应该看起来像这样。

<div class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
      ...
      <li>
        <a asp-page="/ImageUpload">Image Upload</a>
      </li>
  </ul>
</div>

同时，在您的 _Layout.cshtml 文件的顶部，head 结束标记之后，添加一个 Styles 部分。

<head>
  ...
  @RenderSection("Styles", required: false);
</head>

现在继续运行该应用程序以显示默认的 Razor Pages 应用程序。您还应该在导航栏上找到图像上传。

dotnet run

到目前为止，我们只介绍了设置 Razor 页面的基础知识。现在是真正的交易。我们如何将文件上传到我们的页面模型？

让我们首先从此处下载 dropzone。将 js 和 CSS 文件添加到 wwwroot 下的 Js 和 CSS 文件夹。

现在，在您的页面视图上引用 CSS 和 Js 文件。 CSS 在顶部，js 在底部。虽然说实话，这并不重要，因为 RenderSection 助手只会将它们放置在声明它们的位置，但只是为了让您在精神上井井有条。

<!-- At the top of the file -->
@section Styles {
    <link rel="stylesheet" href="~/css/dropzone.css" />
}
<!-- At the bottom of the file -->
@section Scripts {
    <script src="~/lib/dropzone.js"></script>
}

首先，让我们修改我们的页面模型以处理我们未来的上传。继续并将以下代码片段添加到 ImageUpload.cshtml.cs

using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace jqueryRazorpagesSimpleFileUpload.Pages
{
    public class ImageUploadModel : PageModel
    {
        public void OnGetAsync()
        {
        }
        public async Task OnPostAsync(IFormFile image)
        {
            var path = Path.Combine(
                        Directory.GetCurrentDirectory(), "wwwroot/uploads",
                        image.FileName);
            var memory = new MemoryStream();
            using (var stream = new FileStream(path, FileMode.Create))
            {
                await image.CopyToAsync(stream);
            }
        }
    }
}

我们添加了一个方法来处理所有图像上传到我们的页面模型。现在我们可以继续并告诉我们的视图如何上传图像。

现在让我们添加我们的表单，然后修改它以使用我们的 JQuery 插件。

<h1>Image upload page</h1>
<hr />
<div class="row">
    <div class="col-md-12">
        <h2>Upload Image</h2>
        <form method="post" enctype="multipart/form-data">
            <div class="form-group">
                <input name="image" type="file" class="form-control" accept="image/*"/>
            </div>
            <input type="submit" value="Upload" class="btn btn-default" />
        </form>
    </div>
</div>

就目前而言，我们的应用程序完全能够处理我们的图像，但我们想要的是使用 JQuery 上传我们的图像。因此，让我们首先通过添加 dropzone 支持来修改我们的表单。

<form method="post" enctype="multipart/form-data" id="imageUploadForm" class="dropzone">
    <div class="fallback">
            <div class="form-group">
            <input name="image" type="file" class="form-control" accept="image/*"/>
        </div>
            <input type="submit" value="Upload" class="btn btn-default" />
    </div>
</form>

Dropzone 工作所需要的只是将类dropzone添加到表单，但在 Js 不可用的情况下，我们希望我们原来的表单充当备用。很棒吧。现在 Dropzone 没有足够的信息可以使用，所以在我们页面的底部，我们有我们的Scripts 部分，让我们添加一些代码来让我们的图像上传功能。

@section Scripts {
...
<script>
    $("#imageUploadForm").dropzone({ 
        url: "/imageupload",
        paramName: "image", 
        acceptedFiles: "image/*"
    });
</script>
}

这样，我们的应用程序就可以正常运行了。继续并运行您的应用程序并尝试一下。很酷吧？

还有一件事

现在我们已经完成了我们的 JQuery 图像上传并且它正在工作，但是如果我们想显示最近上传的图像呢？实现此目的只有两个简单的步骤。将下面的代码片段添加到类为 row 的 div 正下方。

<div class="row">
    <div class="col-sm-12">
        <h3>Recent Upload</h3>

        <div>
            <img id="recentImage" class="img-responsive img-thumbnail" width="500"/>
        </div>
    </div>
</div>

现在更新 JS 部分以处理成功上传到服务器的文件的图像上传。

<script>
    $("#imageUploadForm").dropzone({ 
        url: "/imageupload",
        paramName: "image", 
        acceptedFiles: "image/*",
        success: function(file){
            $("#recentImage").attr('src', `./uploads/${file.name}`);
        }
    });
</script>

既然我们已经到了这一点，我们对我们的 View 文件做了很多更改。所以在下面找到包含我们到目前为止所做的所有更改的完整 View 代码。

@page 
@model ImageUploadModel 
@{ 
    ViewData["Title"] = "Image Uploader"; 
}
@section Styles {
    <link rel="stylesheet" href="~/css/dropzone.css" />
}
<h1>Image upload page</h1>
<hr />
<div class="row">
    <div class="col-md-12">
        <h2>Upload Image</h2>
        <form method="post" enctype="multipart/form-data" id="imageUploadForm" class="dropzone">
            <div class="fallback">
                 <div class="form-group">
                    <input name="image" type="file" class="form-control" accept="image/*"/>
                </div>
                 <input type="submit" value="Upload" class="btn btn-default" />
            </div>
        </form>
    </div>

</div>
<div class="row">
    <div class="col-sm-12">
        <h3>Recent Upload</h3>

        <div>
            <img id="recentImage" class="img-responsive img-thumbnail" width="500"/>
        </div>
    </div>
</div>
@section Scripts {
    <script src="~/lib/dropzone.js"></script>
    <script>
        $("#imageUploadForm").dropzone({ 
            url: "/imageupload",
            paramName: "image", 
            acceptedFiles: "image/*",
            success: function(file){
                $("#recentImage").attr('src', `./uploads/${file.name}`);
            }
        });
    </script>
}

这是最终应用程序应该的样子

结论

感谢您的坚持。这是代码的 GitHub 存储库的链接。我希望你学到了一些新东西。请分享并留下评论，无论您出于何种原因。