HttpPostedFileBase ma zawsze wartość zerową z częściowym wyświetleniem

Question

Zajmuję się tworzeniem aplikacji do przesyłania pliku PDF na serwer przy użyciu niestandardowego modalnego okna podręcznego. Używam przeglądarki do kontroli html przeglądarki, aby przesłać plik .pdf i ta kontrola została zaprojektowana w widoku częściowym. Kiedy klikam przycisk "Dodaj", to po stronie serwera nie otrzymałem wartości HttpPostedFileBase i FormCollection.

Oto mój kod:

Częściowy Widok:

@model Zytron.Models.ProductDataControls 

    @using (Html.BeginForm("UploadFiles", "AdminPanel", FormMethod.Post, new 
    { 
     @id = "file_upload", 
    })) 

    { 

     <table width="100%" cellpadding="5" cellspacing="1"> 
      <tr> 
       <td> 
        <span>Description</span> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        @Html.TextBoxFor(m => m.Description, new 
       { 
        @class = "textBox" 
       }) 
        @Html.HiddenFor(m => m.ProductId) 
        @Html.HiddenFor(m => m.ParentId) 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <span>File Source</span> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input type="file" id="fileUpload" name="fileUpload" size="23" /> 
       </td> 
      </tr> 
     </table> 
    } 

Kod Model:

public class ProductDataControls 

{ 



     public string Description { get; set; } 

    } 

klienta Modal Kod Popup:

function loadProdAttachFile(tag, event, target) 
{ 
    event.preventDefault(); 
    var $loading = $('<img src="@Url.Content("~/Images/ajaxLoading.gif")" alt="loading" class="ui-loading-icon">'); 
    var $url = $(tag).attr('href'); 
    var $title = $(tag).attr('title'); 
    var $dialog = $('<div></div>'); 
    $dialog.empty(); 
    //   alert($url); 
    $dialog 
      .append($loading) 
      .load($url) 
       .dialog({ 
        autoOpen: false 
       , title: $title 
       , width: 500 
       , modal: true 
       , minHeight: 220 
       , show: 'fade' 
       , hide: 'fade' 
       }); 

       $dialog.dialog("option", "buttons", { 
        "Add": function() { 
         var dlg = $(this); 
         //$('form#file_upload').submit(); 

         var file = document.getElementById("fileUpload").value; 
         var pid = getParamValue("pid", $url); 
         var type = getParamValue("type", $url); 

         $.ajax({ 
          url: '/AdminPanel/UploadFiles', 
          type: 'POST', 
          data: { 'file': file, 'pid' : pid, 'type' : type }, 
          success: function (response) { 
           dlg.dialog('close'); 
           dlg.empty(); 
          }, 
          error: function (xhr) { 
           if (xhr.status == 400) 
            dlg.html(xhr.responseText, xhr.status);  /* display validation errors in edit dialog */ 
           else 
            displayError(xhr.responseText, xhr.status); /* display other errors in separate dialog */ 
          } 
         }); 

        }, 
        "Cancel": function() { 
         $(this).dialog("close"); 
         $(this).empty(); 
        } 
       }); 
    $dialog.dialog('open'); 
}; 

kod Kontroler:

[HttpPost] 

public void UploadFiles(HttpPostedFileBase file, FormCollection form) 
{ 
} 

Zobacz Kod:

<a href "/ UploadFiles” class="ModalDlgProdAttachment" <img src=”../Images/MyImage.jpg" /> </a> 

$('a. ModalDlgProdAttachment).live("click", function (event) { loadProdAttachFile(this, event, "# file_upload"); }); 

Answer 1

Nie można przesyłać pliki za pomocą AJAX. Było to wielokrotnie omawiane w StackOverflow. Masz kilka rozwiązań:

• Jeśli przeglądarek klientów, że używasz podtrzymują HTML5 File API mógł go użyć, aby przesłać plik za pomocą AJAX.
• Jeśli go nie obsługują, można użyć komponentu do przesyłania plików, takiego jak Uploadify, BlueImp File Upload i Valums File Uploader. Te elementy sterujące sprawdzają, czy przeglądarka klienta obsługuje HTML5 i używa go, jeśli tak jest i czy nie ma ona zastosowania w innych technikach, które wymagają użycia ukrytych elementów iframe lub filmów Flash.

Answer 2

Jeśli chcesz to zrobić bez AJAX, można przesłać plik za pomocą <input type="file" /> wewnątrz tagu formularza i pobrać go na działanie jako HttpPostedFileBase. Tylko pamiętaj, aby dodać parametr enctype do wartości trasy obiektu: podpis

@using (Html.BeginForm("UploadFiles", "AdminPanel", FormMethod.Post, new { @id = "file_upload", enctype = "multipart/form-data" })) 
{ 
    <input type="file" name="uploadedFile" /> 
} 

Działanie:

[HttpPost] 
public ActionResult UploadFiles(HttpPostedFileBase uploadedFile, SomeOtherViewModel stuff) 

Ale, jak Darin mówi, to tylko naprawdę zajmuje jeden plik na raz i nie będzie obsługiwać wywołanie AJAX.

Answer 3

Należy upewnić się, że atrybut "name" elementu wejściowego jest taki sam jak nazwa parametru HttpPostedFileBase w metodzie "UploadFiles". W ten sposób MVC dopasowuje przesłany plik do metody.