Как я могу загрузить файл, используя html тип ввода "file" через ajax с привязкой модели веб-API

Question

Я использую веб-контроллер MVC 5 Api и хочу, чтобы мои данные поступали через ajax с файлом для автоматического связывания?

Answer 1

Вы можете добавить свой загруженный файл в FormData и отправить его через Fetch API .

---

Вот демонстрация, чтобы начать:

window.onload = () => {

  document.querySelector('#myFile').addEventListener('change', (event) => {
  
    // Just upload a single file, if you want multiple files then remove the [0]
    if (!event.target.files[0]) {
      alert('Please upload a file');
      return;
    }

    const formData = new FormData();
    formData.append('myFile', event.target.files[0]);

    // Your REST API URL here
    const url = "";

    fetch(url, {
        method: 'post',
        body: formData
      })
      .then(resp => resp.json())
      .then(data => alert('File uploaded successfully!'))
      .catch(err => {
        alert('Error while uploading file!');
      });
  });

};

<input id="myFile" type="file" />

После этого просто получите файл из текущего запроса в методе действия API.

[HttpPost]
public IHttpActionResult UploadFile()
{
    if (HttpContext.Current.Request.Files.Count > 0)
    {
        var file = HttpContext.Current.Request.Files[0];

        if (file != null)
        {
            // Do something with file now
        }
    }

    return Ok(new { message = "File uploaded successfully!" }); 
}