如何使用 JQuery 将文件上传到 MVC VNext 网络服务器？答案

【问题标题】：How to upload file with JQuery to MVC VNext webserver?如何使用 JQuery 将文件上传到 MVC VNext 网络服务器？
【发布时间】：2015-12-25 20:25:07
【问题描述】：

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

我已阅读此article，它有效且一切正常。但是不使用<form>怎么上传文件呢？

之所以这样，是因为我想上传文件而不加载新页面。

我已阅读此article，但它似乎不起作用。参数 IFormFile 始终为空。

【问题讨论】：

标签： jquery asp.net asp.net-mvc asp.net-core-mvc asp.net-core

【解决方案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 对象Upload multiple image using AJAX, PHP and jQuery

【讨论】：

【解决方案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);
    }
}

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

【讨论】：