nicht in der Lage, Datei mit Ajax.BeginForm() asynchron

Question

hochladen Ich versuche, eine Datei mit Ajax.BeginForm() hochladen, aber es funktioniert nicht.

Meine Ansicht Enthält:

@using (Ajax.BeginForm("UploadFile", null, new AjaxOptions { HttpMethod="POST",  UpdateTargetId = "result" }, new { enctype = "multipart/form-data" })) 
{   
    <label id="lblUploadNewFile" for="fileUploadControl">Upload New File&lt;/label>  
    <input type="file" name="fileToUpload" id="fileUploadControl"/> 
    <input id="btnFileUpload" type="submit" value="Upload" /> 
    <span id="result" />    
} 

und der entsprechende Controller ist:

[HttpPost] 
public string UploadFile(FormCollection formData) 
{ 
    HttpPostedFileBase file=null; 

    try 
    { 
     file = Request.Files[0]; 
    } 
    catch { } 

    if (file!=null && file.ContentLength > 0) 
    { 
     file.SaveAs(string.Concat(
      AppDomain.CurrentDomain.BaseDirectory, 
      Path.GetFileName(file.FileName))); 

     return "Successfully Uploaded"; 
    } 
    else 
    { 
     return "Upload Failed, please try again."; 
    } 
} 

Das Problem ist, dass es die Datei ist das Hochladen, aber nicht mehr tun, keine asynchronen Beiträge, wenn ich jquery.unobtrusive-ajax.js entfernen. Stattdessen macht es einen vollständigen Post-Back.

Wenn ich hinzufügen jquery.unobtrusive-ajax.js in meiner Ansicht, es tut asynchron, aber nicht senden Datei in Formulardaten. In Request.Files[] wird keine Datei an den Server gesendet.

Answer 1

Sie können keine Dateien mit AJAX hochladen. Dies wird nicht unterstützt. Wenn Sie das tun wollen, können Sie entweder ein Datei-Upload-Plugin wie Uploadify oder Blueimp File Upload verwenden oder das HTML 5 File API verwenden, wenn der Client-Browser es unterstützt.

Answer 2

Sie können dies ohne zusätzliche Bibliotheken tun.

Ich kam in diesem kleinen Hack, das es schön

window.addEventListener("submit", function (e) { 
    var form = e.target; 
    if (form.getAttribute("enctype") === "multipart/form-data") { 
     if (form.dataset.ajax) { 
      e.preventDefault(); 
      e.stopImmediatePropagation(); 
      var xhr = new XMLHttpRequest(); 
      xhr.open(form.method, form.action); 
      xhr.onreadystatechange = function() { 
       if (xhr.readyState == 4 && xhr.status == 200) { 
        if (form.dataset.ajaxUpdate) { 
         var updateTarget = document.querySelector(form.dataset.ajaxUpdate); 
         if (updateTarget) { 
          updateTarget.innerHTML = xhr.responseText; 
         } 
        } 
       } 
      }; 
      xhr.send(new FormData(form)); 
     } 
    } 
}, true); 

http://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working