2012-12-08 34 views
5

Tôi đang phát triển một ứng dụng để tải lên tệp pdf trên máy chủ bằng cách sử dụng cửa sổ bật lên tùy chỉnh theo phương thức. Tôi đang sử dụng tính năng kiểm soát tệp trình duyệt tải lên html để tải lên tệp .pdf và điều khiển này được thiết kế trong Chế độ xem một phần. Khi tôi nhấp vào nút ‘Thêm’ thì ở phía máy chủ, tôi không nhận được giá trị HttpPostedFileBase và FormCollection.HttpPostedFileBase luôn rỗng với partview

Đây là mã của tôi:

Partial View:

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

Mẫu Mã số:

public class ProductDataControls 

{ 



     public string Description { get; set; } 

    } 

Tuỳ chỉnh Modal Popup Code:

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

đang điều khiển:

[HttpPost] 

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

Xem Code:

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

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

Trả lời

2

Bạn không thể tải file sử dụng AJAX. Điều này đã được thảo luận nhiều lần trên StackOverflow. Bạn có một vài giải pháp:

  • Nếu trình duyệt khách hàng bạn đang sử dụng hỗ trợ HTML5 File API bạn có thể sử dụng nó để tải lên tệp bằng AJAX.
  • Nếu không hỗ trợ, bạn có thể sử dụng thành phần tải lên tệp chẳng hạn như Uploadify, BlueImp File UploadValums File Uploader. Những điều khiển này sẽ kiểm tra xem trình duyệt của khách hàng có hỗ trợ HTML5 hay không và sử dụng nó nếu như vậy và nếu nó không dự phòng các kỹ thuật khác liên quan đến việc sử dụng iframe ẩn hoặc phim Flash.
0

Nếu bạn muốn làm điều đó mà không cần AJAX, bạn có thể tải lên một tập tin sử dụng <input type="file" /> trong thẻ form của bạn và lấy nó trên hành động như HttpPostedFileBase. Chỉ cần chắc chắn rằng bạn thêm tham số enctype đến giá trị tuyến đường của bạn phản đối:

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

Hành động chữ ký:

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

Nhưng, như Darin nói, điều này chỉ thực sự xử lý một tập tin tại một thời điểm và sẽ không xử lý một cuộc gọi AJAX.

2

Bạn cần đảm bảo rằng thuộc tính 'tên' của phần tử nhập của bạn giống với tên của tham số HttpPostedFileBase trong phương thức 'UploadFiles' của bạn. Đây là cách MVC khớp với tệp đã tải lên với phương thức.

Các vấn đề liên quan