如何将 JQuery 的文件上传到 MVC VNext 网络服务器？

Question

我希望能够将文件发送到 MVC VNext 网络服务器。

我读过这个 article，它很有效，而且一切都很好。但是它如何在不使用 <form> 的情况下上传文件？

这是因为我想在不加载新页面的情况下上传文件。

我读过这个 article，但它似乎不起作用。参数 IFormFile 始终为空。

Answer 1

尝试使用 input type="file"、FormData、$.post()

$.ajaxSetup({processData:false,contentType:false});
$("input[type=file]").change(function() {    
  var data = new FormData(); data.append("file", this.files[0]);
  $.post("/path/to/server", data)
});

或者，将文件转换为 JSON 对象

Answer 2

添加输入文件标签您的视图。

<form asp-action="Index" asp-controller="Home">   
    <input type="file" id="logo" name="logo" />
    <input type="submit" id="btnSave" />
</form>

我们将添加一些 javascript 来监听提交按钮事件并通过 ajax 发送数据。

@section Scripts
{
    <script>
    $(function () {
        $("#btnSave").click(function (e) {
            e.preventDefault();

            var fdata = new FormData();

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

            $.ajax({
                type: 'post',
                url: "@Url.Action("SaveFile","Home")",
                data: fdata,
                processData: false, 
                contentType: false, 
            }).done(function (result) {
                // do something with the result now
                console.log(result);    
            });    
        });
    });
    </script>    
}

并且您应该有一个操作方法来接受文件发布

public class HomeController : Controller
{
    private readonly IHostingEnvironment hostingEnvironment;
    public HomeController(IHostingEnvironment environment)
    {
        hostingEnvironment = environment;
    }
    [HttpPost]
    public IActionResult Index(IFormFile logo)
    {
        if (logo != null)
        {
            var uploads = Path.Combine(hostingEnvironment.WebRootPath, "uploads");
            var filePath = Path.Combine(uploads, GetUniqueFileName(logo.FileName));
            logo.CopyTo(new FileStream(filePath, FileMode.Create));

        }
        // to do  : Return something
        return RedirectToAction("Index","Home");
    }
    private string GetUniqueFileName(string fileName)
    {
        fileName = Path.GetFileName(fileName);
        return  Path.GetFileNameWithoutExtension(fileName)
                  + "_" 
                  + Guid.NewGuid().ToString().Substring(0, 4) 
                  + Path.GetExtension(fileName);
    }
}

这会将文件保存到 uploads 文件夹中 wwwwroot 您的应用程序目录，使用 Guids 生成随机文件名（以防止覆盖同名文件）