如何将文件从 AJAX 上传到 asp.net 核心控制器

Question

我无法为我的操作提供文件。动作为空。我使用 ASP.NET 核心。

HTML

<form enctype="multipart/form-data" method="POST" id="QuestionImgUpload" action="/api/TestQuestions/PostQuestionIMG">
    <input id="QuestionImg" type="file" name="file">
</form>

JS：

var formData = new FormData();
var file = document.getElementById("QuestionImg").files[0];
formData.append("QuestionImg", file);
$.ajax({
  url: "/api/TestQuestions/PostQuestionIMG",
  type: "POST",
  data: formData,
  contentType: false,
  processData: false,
  success: function() {
  }
});

行动：

 [Route("PostQuestionIMG")]
 [HttpPost]
 public IActionResult PostQuestionIMG(IFormFile file)
 {    
     return Ok();
 }

Answer 1

这与我的问题相似。

问题是 formData 的名称与 ASP.NET 操作的参数名称不对应。

FormData 的 append 函数的第一个参数是 name。在您的 JavaScript 代码中，它是“QuestionImg”。

您的 ASP.NET 代码：

 [Route("PostQuestionIMG")]
 [HttpPost]
 public IActionResult PostQuestionIMG(IFormFile file)
 {    
     return Ok();
 }

如果您的 ASP.NET 操作的参数名称是“file”，则必须将 formData 的字段名称设置为“file”。

我将您的 JavaScript 代码重构如下：

var formData = new FormData();
var file = document.getElementById("QuestionImg").files[0];
formData.append("file", file);
$.ajax({
  url: "/api/TestQuestions/PostQuestionIMG",
  type: "POST",
  data: formData,
  contentType: false,
  processData: false,
  success: function() {
  }
});

Answer 2

这与我的问题类似，因为 ICollection 没有注册我的 javascript 调用，但带有文件的请求仍然到达我的控制器。

在控制器中，尝试：

    [HttpPost]
    [Route("ImportDataFromExcelFile")]
    public async Task<IActionResult> ImportDataFromExcelFile(ICollection<IFormFile> files)
    {
        var myfiles = HttpContext.Request.Form.Files; //THIS IS THE ACTUAL FILE LIST!
        long size = files.Sum(f => f.Length); //this is 0... the ICollection 
               //doesn't register the files that are in the request.

        return Ok(new { stuff = 1, size});
    }

我想您的请求可能以相同的方式工作。为了清楚起见，我的电话是这样的：

    const formData = new FormData(); 
    for (var i = 0; i < files.length; i++) {
        var file = files.item(i);
        formData.append(file.name, file);
    }
    var xhr = new XMLHttpRequest;
    xhr.open('POST', data.endpoint, true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            //file uploaded
            console.log("success");
        } else {
            console.log("error");
        }
    }

再次，我意识到这不是您进行 ajax 调用的方式，但我的意思是数据可能仍在请求中，只是没有被分配。也许这会有所帮助，直到您、我或其他人想出一个很好的答案。

祝你好运！

Answer 3

首先确保您的路线设置正确。我假设您的控制器带有注释：[Route("api/TestQuestions")]

然后您可以像这样访问发布的文件：

[Route("PostQuestionIMG")]
[HttpPost]
public IActionResult PostQuestionIMG()
{
    var file = HttpContext.Request.Form.Files[0];
    return Ok();
}

Answer 4

有一种方法可以使用 HTML FileReader 对象outlined on this post。

$("#FileUpload").on('change', function (e) {
var $self = this;
var file = $self.files[0];

var fileReader = new FileReader();
fileReader.addEventListener('load', function () {
   var result = fileReader.result;
   $hidden.val(result);
});
fileReader.readAsDataURL(file);

$self.val('');
});

基本上是读取文件，获取数据，然后您可以将其 AJAX 发送到服务器作为替代方案。我的示例将其存储在隐藏字段中，而不是通过 AJAX 处理，但替换该函数很简单。

Answer 5

直接通过ajax上传文件比较困难，但是你可以使用iframe来达到你的目的。

如下修改你的代码：

<form enctype="multipart/form-data" method="POST" id="QuestionImgUpload" action="/api/TestQuestions/PostQuestionIMG" target="upload_post">
    <input id="QuestionImg" type="file" name="file">
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe> 

在iframe 的帮助下，我们可以像这样提交我们的表单：

$("#QuestionImgUpload").submit();

更多详情请访问AJAX file upload tutorial或jQuery Ajax File Upload