2012-12-08 37 views
5

Sto sviluppando un'applicazione per il caricamento di file pdf sul server utilizzando popup modali personalizzati. Uso il controllo html del browser per caricare file per caricare file .pdf e questo controllo è progettato in una vista parziale. Quando faccio clic sul pulsante "Aggiungi", sul lato server non ho ottenuto il valore HttpPostedFileBase e FormCollection.HttpPostedFileBase è sempre nullo con partialview

Ecco il mio codice:

Parziale Vista:

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

Codice Modello:

public class ProductDataControls 

{ 



     public string Description { get; set; } 

    } 

personalizzato Modal Codice 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'); 
}; 

Controller cod:

[HttpPost] 

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

Visualizza codice:

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

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

risposta

2

Non è possibile caricare file utilizzando AJAX. Questo è stato discusso molte volte su StackOverflow. Hai un paio di soluzioni:

  • Se i browser client che si sta utilizzando il supporto del HTML5 File API si potrebbe usare per caricare un file utilizzando AJAX.
  • Se non lo supportano, è possibile utilizzare un componente di caricamento file come Uploadify, BlueImp File Upload e Valums File Uploader. Questi controlli verificheranno se il browser client supporta HTML5 e lo userà in questo caso e se non ripiega su altre tecniche che implicano l'utilizzo di iframe nascosti o filmati Flash.
0

Se si vuole fare senza AJAX, è possibile caricare un file utilizzando <input type="file" /> all'interno del vostro tag form e recuperarlo sull'azione come HttpPostedFileBase. Basta fare in modo di aggiungere il parametro enctype ai vostri valori del percorso oggetto: firma

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

Azione:

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

Ma, come ha detto Darin, questo si occupa veramente solo un file alla volta e non gestirà una chiamata AJAX.

2

È necessario assicurarsi che l'attributo 'nome' dell'elemento di input sia uguale al nome del parametro HttpPostedFileBase nel metodo 'UploadFiles'. Ecco come MVC abbina il metodo caricato al file.