Question

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

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

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

我已经阅读了这个article，但似乎没有用。参数IFormFile总是为null。

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对象Upload multiple image using AJAX, PHP and jQuery

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);
    }
}

这会将文件保存到您应用的 wwwwroot 目录中的上传文件夹中，并带有随机文件名使用Guids生成（以防止覆盖具有相同名称的文件）

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

2 个答案: