Загрузка файла JQuery WebApi

Question

Я использовал этот следующий код для загрузки файла на сервер, но файл не загружен.

Html:

 <form id="upload"> 
     <div> 
      <label for="myFile"></label> 
      <div> 
       <input type="file" id="myFile" /> 
      </div> 
     </div> 
     <button type="submit">Upload</button> 
    </form> 

Javascript:

 // Hook into the form's submit event. 
    $('#upload').submit(function() { 

     // To keep things simple in this example, we'll 
     // use the FormData XMLHttpRequest Level 2 object (which 
     // requires modern browsers e.g. IE10+, Firefox 4+, Chrome 7+, Opera 12+ etc). 
     var formData = new FormData(); 

     // We'll grab our file upload form element (there's only one, hence [0]). 
     var opmlFile = $('#opmlFile')[0]; 

     // If this example we'll just grab the one file (and hope there's at least one). 
     formData.append("opmlFile", opmlFile.files[0]); 

     // Now we can send our upload! 
     $.ajax({ 
      url: 'api/upload', // We'll send to our Web API UploadController 
      data: formData, // Pass through our fancy form data 

      // To prevent jQuery from trying to do clever things with our post which 
      // will break our upload, we'll set the following to false 
      cache: false, 
      contentType: false, 
      processData: false, 

      // We're doing a post, obviously. 
      type: 'POST', 

      success: function() { 
       // Success! 
       alert('Woot!'); 
      } 
     }); 

     // Returning false will prevent the event from 
     // bubbling and re-posting the form (synchronously). 
     return false; 
    }); 

Контроллер выглядит следующим образом:

  using System; 
using System.IO; 
using System.Net; 
using System.Net.Http; 
using System.Web; 
using System.Web.Http; 

class UploadController : ApiController 
{ 
    public async void Post() 
    { 
     if (!Request.Content.IsMimeMultipartContent()) 
     { 
      throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotAcceptable, "This request is not properly formatted")); 
     } 

     // We'll store the uploaded files in an Uploads folder under the web app's App_Data special folder 
     var streamProvider = new MultipartFormDataStreamProvider(HttpContext.Current.Server.MapPath("~/App_Data/Uploads/")); 

     // Once the files have been written out, we can then process them. 
     await Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith(t => 
     { 
      if (t.IsFaulted || t.IsCanceled) 
      { 
       throw new HttpResponseException(HttpStatusCode.InternalServerError); 
      } 

      // Here we can iterate over each file that got uploaded. 
      foreach (var fileData in t.Result.FileData) 
      { 
       // Some good things to do are to check the MIME type before we do the processing, e.g. for XML: 
       if (fileData.Headers.ContentType.MediaType.Equals("text/xml", StringComparison.InvariantCultureIgnoreCase)) 
       { 
        // And this is how we can read the contents (note you would probably want to do this asychronously 
        // but let's try keep things simple for now). 
        string contents = File.ReadAllText(fileData.LocalFileName); 
       } 
      } 
     }); 
    } 
} 

The A ction hit, но файл не загружен.

Answer 1

Вместо кнопки можно вы попробовать с обычной кнопкой Submit -

<form enctype="multipart/form-data"> 
    <label> 
     Using JQuery 
    </label> 
    <input name="file" type="file" id="me" /> 
    <input type="button" id="Upload" value="Upload" /> 
</form> 

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#Upload').click(function() { 
      var formData = new FormData(); 
      var opmlFile = $('#me')[0]; 
      formData.append("opmlFile", opmlFile.files[0]); 

      $.ajax({ 
       url: 'http://localhost:23133/api/file', 
       type: 'POST', 
       data: formData, 
       cache: false, 
       contentType: false, 
       processData: false 
      }); 
     }); 
    }); 
</script> 

контроллера действий -

public HttpResponseMessage Post() 
    { 
     HttpResponseMessage result = null; 
     var httpRequest = HttpContext.Current.Request; 

     // Check if files are available 
     if (httpRequest.Files.Count > 0) 
     { 
      var files = new List<string>(); 

      // interate the files and save on the server 
      foreach (string file in httpRequest.Files) 
      { 
       var postedFile = httpRequest.Files[file]; 
       var filePath = HttpContext.Current.Server.MapPath("~/" + postedFile.FileName); 
       postedFile.SaveAs(filePath); 

       files.Add(filePath); 
      } 

      // return result 
      result = Request.CreateResponse(HttpStatusCode.Created, files); 
     } 
     else 
     { 
      // return BadRequest (no file(s) available) 
      result = Request.CreateResponse(HttpStatusCode.BadRequest); 
     } 

     return result; 
    } 

Выход -

Answer 2

Ваш браузер не ссылающийся на правильное управление вводом файлов.

Вам необходимо изменить это var opmlFile = $ ('# opmlFile') [0];

К этому var opmlFile = $ ('# myFile') [0];