asp.net mvc 4 Файл загрузки файла AJAX равен NULL

Question

/file/uploadfile/Я пытаюсь реализовать загрузку файла на сервер, когда пользователь нажимает OK в диалоговом окне «Выбрать файлы». Попытка реализовать такую ​​демонстрационную версию: http://jsfiddle.net/cHpDa/. Но в контроллере я получаю NULL вместо файла. Я прочитал, что мне нужно ajaxify мою форму (HttpPostedFile in File Upload process is NULL if I use AJAX), но мои попытки реализовать ajaxify были провалены.

Вид:

<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script> 

<h1>Ajax File Upload Demo</h1> 
<form id="myForm" method="post" enctype="multipart/form-data"> 
    <input type="file" size="60" name="myfile" id="myfile" /> 
</form> 

<div id="progress"> 
    <div id="bar"></div> 
    <div id="percent">0.0%</div > 
</div> 
<div id="message"></div> 


<div id="FilesListDiv"> 
    @Html.Partial("~/Views/File/FileList.cshtml") 
</div> 

<script> 
    $('#myfile').on("change",function(){ 
     var options = { 
      type:"post", 
      url: "/file/uploadfile/", 
      beforeSend: function() 
      { 
       $("#progress").show(); 
       //clear everything 
       $("#bar").width('0%'); 
       $("#message").html(""); 
       $("#percent").html("0%"); 
      }, 
      uploadProgress: function(event, position, total, percentComplete) 
      { 
       $("#bar").width(percentComplete+'%'); 
       $("#percent").html(percentComplete+'%'); 
      }, 
      success: function() 
      { 
       $("#bar").width('100%'); 
       $("#percent").html('100%'); 

      }, 
      complete: function(response) 
      { 
       $("#message").html("<font color='green'>"+response.responseText+"</font>"); 
      }, 
      error: function() 
      { 
       $("#message").html("<font color='red'> ERROR: unable to upload files</font>"); 
      } 
     }; 

     $("#myForm").ajaxSubmit(options); 
    }); 
</script> 

Контроллер:

[HttpPost] 
    public ActionResult UploadFile(HttpPostedFileBase myfile) 
    { 
     if (myfile != null) //here is a PROBLEM - myfile is NULL 
     { 
      this.UploadFile(myfile); 
     } 

     return PartialView("FileList"); 
    } 

Answer 1

Вы не можете загружать файлы с помощью AJAX. Это не поддерживается. Если вы хотите это сделать, вы можете использовать какой-либо плагин для загрузки файлов, такой как Uploadify или Blueimp File Upload, или использовать API файлов HTML 5, если браузер поддерживает браузер.