không thể tải tệp lên bằng cách sử dụng Ajax.BeginForm() không đồng bộ

Question

Tôi đang cố tải lên tệp bằng Ajax.BeginForm() nhưng không hoạt động.

Xem My Chứa:

@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" />    
} 

và điều khiển tương ứng là:

[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."; 
    } 
} 

Vấn đề là nó tải lên các tập tin nhưng không còn làm bất kỳ bài viết không đồng bộ khi tôi loại bỏ jquery.unobtrusive-ajax.js. Thay vào đó, nó hoàn toàn trả sau.

Khi tôi thêm jquery.unobtrusive-ajax.js theo quan điểm của tôi, nó hoạt động không đồng bộ nhưng không gửi tệp tải lên trong dữ liệu biểu mẫu. Không có tệp nào được gửi tới máy chủ trong Request.Files[].

Answer 1

Bạn không thể tải tệp lên bằng AJAX. Điều này không được hỗ trợ. Nếu bạn muốn thực hiện điều đó, bạn có thể sử dụng một số plugin tải tệp lên như Uploadify hoặc Blueimp File Upload hoặc sử dụng HTML 5 File API nếu trình duyệt của khách hàng hỗ trợ plugin đó.

Answer 2

Bạn có thể thực hiện việc này mà không cần thêm thư viện.

Tôi đã xem qua ít hack này, mà giải quyết nó độc đáo

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); 

Tìm thấy http://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working