Question

我正在开发一个使用自定义模式弹出窗口在服务器上上传pdf文件的应用程序。我正在使用文件上传浏览器html控件来上传.pdf文件，此控件是在Partial View中设计的。当我点击“添加”按钮然后在服务器端我没有得到HttpPostedFileBase和FormCollection值。

这是我的代码：

部分视图：

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

型号代码：

public class ProductDataControls

 {



       public string Description { get; set; }

  }

自定义模态弹出代码：

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

控制器代码：

[HttpPost]

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

查看代码：

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

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

Answer 1

您无法使用AJAX上传文件。这已在StackOverflow上多次讨论过。你有几个解决方案：

如果您使用的客户端浏览器支持HTML5 File API，您可以使用它来使用AJAX上传文件。
如果他们不支持，您可以使用文件上传组件，例如Uploadify，BlueImp File Upload和Valums File Uploader。这些控件将测试客户端浏览器是否支持HTML5并在其中使用它，如果它不回退到涉及使用隐藏的iframe或Flash电影的其他技术。

Answer 2

您需要确保input元素的'name'属性与'UploadFiles'方法中HttpPostedFileBase参数的名称相同。这是MVC将上传的文件与方法匹配的方式。

Answer 3

如果您想在没有AJAX的情况下进行此操作，可以在表单标记中使用<input type="file" />上传文件，并在HttpPostedFileBase的操作中检索该文件。只需确保将enctype参数添加到路由值对象：

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

动作签名：

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

但是，正如Darin所说，这只能一次处理一个文件，并且不会处理AJAX调用。

Answer 4

在您的视图中使用以下代码：

@using（Html.BeginForm（“ SubmitTicket”，“ Ticket”，FormMethod.Post，新的{@class =“ form”，enctype =“ multipart / form-data”，@ id =“ frmTicket”}））

使用partialview时，HttpPostedFileBase始终为null

4 个答案: