在 ASP.Net Core MVC 中使用 AJAX 提交表单

我正在使用 ASP.Net Core 2.1，并尝试在返回文件的 url 时上传文件，而不刷新页面。

我正在尝试在 site.js 中编写 JavaScript，因为 _RenderPartial("scripts") 在页面末尾呈现所有脚本，因此在剃刀视图中直接使用脚本标记不起作用。其次，将其添加到 site.js 使我有机会跨站点视图调用脚本。

我的控制器操作如下所示：

    [HttpPost]
    [DisableRequestSizeLimit]
    public async Task<IActionResult> Upload()
    {
      // Read & copy to stream the content of MultiPart-Form
      // Return the URL of the uploaded file
      return Content(FileName);
    }

我的观点如下：

<form id="FileUploadForm" action="~/Resources/Upload" method="post" enctype="multipart/form-data">
<input name="uploadfile" type="file" />
<button name="uploadbtn" type="submit" onclick="SubmitForm(this.parentElement, event)">Upload</button>

该 site.is 目前看起来像：

function SubmitForm(form, caller) {
caller.preventDefault();
$.ajax(
    {
        type: form.method,
        url: form.action,
        data: form.serialize(),
        success: function (data) { alert(data); },
        error: function (data) { alert(data); }
    })}

目前，代码绕过整个脚本，上传文件并返回显示文件名的新视图。我需要帮助来创建 JavaScript。

不幸的是 jQueryserialize()方法将不包含输入文件元素。因此，用户选择的文件不会包含在序列化值（基本上是一个字符串）中。

你可以做的是，创建一个FormData对象，将文件附加到该对象。制作时 ajax调用，需要指定processData and contentType属性值至false

<form id="FileUploadForm" asp-action="Upload" asp-controller="Home" 
                                              method="post" enctype="multipart/form-data">
    <input id="uploadfile" type="file" />
    <button name="uploadbtn" type="submit">Upload</button>
</form>

这里以一种不引人注目的方式来处理表单提交事件，我们将停止常规行为并执行 ajax 提交。

$(function () {
    $("#FileUploadForm").submit(function (e) {
        e.preventDefault();

        console.log('Doing ajax submit');

        var formAction = $(this).attr("action");
        var fdata = new FormData();

        var fileInput = $('#uploadfile')[0];
        var file = fileInput.files[0];
        fdata.append("file", file);

        $.ajax({
            type: 'post',
            url: formAction,
            data: fdata,
            processData: false,
            contentType: false
        }).done(function (result) {
            // do something with the result now
            console.log(result);
            if (result.status === "success") {
                alert(result.url);
            } else {
                alert(result.message);
            }
        });
    });
})

假设您的服务器端方法有一个参数，其名称与我们创建时使用的参数相同FormData对象输入（file）。这是一个示例，它将图像上传到uploads里面的目录wwwwroot.

action 方法返回一个带有 status 和 url/message 属性的 JSON 对象，您可以在success/doneajax 调用的处理程序可以执行您想做的任何操作。

public class HomeController : Controller
{
    private readonly IHostingEnvironment hostingEnvironment;
    public HomeController(IHostingEnvironment environment)
    {
        _context = context;
        hostingEnvironment = environment;
    }
    [HttpPost]
    public async Task<IActionResult> Upload(IFormFile file)
    {
        try
        {
            var uniqueFileName = GetUniqueFileName(file.FileName);
            var uploads = Path.Combine(hostingEnvironment.WebRootPath, "uploads");
            var filePath = Path.Combine(uploads, uniqueFileName);
            file.CopyTo(new FileStream(filePath, FileMode.Create));
            var url = Url.Content("~/uploads/" + uniqueFileName);
            return Json(new { status = "success", url = url });
        }
        catch(Exception ex)
        {
            // to do : log error
            return Json(new { status = "error", message = ex.Message });
        }
    }
    private string GetUniqueFileName(string fileName)
    {
        fileName = Path.GetFileName(fileName);
        return Path.GetFileNameWithoutExtension(fileName)
                  + "_"
                  + Guid.NewGuid().ToString().Substring(0, 4)
                  + Path.GetExtension(fileName);
    }
}