5

我正在开发一个应用程序，用于使用自定义模式弹出在服务器上上传 pdf 文件。我正在使用文件上传浏览器 html 控件来上传 .pdf 文件，并且该控件是在部分视图中设计的。当我单击“添加”按钮时，在服务器端我没有得到 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"); });
4

4 回答 4

2

您需要确保输入元素的“名称”属性与“上传文件”方法中的 HttpPostedFileBase 参数的名称相同。这就是 MVC 将上传的文件与方法匹配的方式。

于 2012-12-11T10:42:47.123 回答
2

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

  • 如果您使用的客户端浏览器支持，HTML5 File API您可以使用它通过 AJAX 上传文件。
  • 如果他们不支持它，您可以使用文件上传组件，例如UploadifyBlueImp File Upload和Valums File Uploader。这些控件将测试客户端浏览器是否支持 HTML5，如果支持则使用它，如果它不回退到涉及使用隐藏 iframe 或 Flash 电影的其他技术。
于 2012-12-08T15:24:18.040 回答
0

如果您想在没有 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 调用。

于 2012-12-08T15:40:40.953 回答
0

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

@using (Html.BeginForm("SubmitTicket", "Ticket", FormMethod.Post, new { @class = "form", enctype = "multipart/form-data", @id = "frmTicket" }))

于 2020-06-15T06:23:03.273 回答