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

入力要素の 'name' 属性が、'UploadFiles' メソッドの HttpPostedFileBase パラメーターの名前と同じであることを確認する必要があります。これは、MVC がアップロードされたファイルをメソッドに一致させる方法です。

于 2012-12-11T10:42:47.123 に答える
2

AJAX を使用してファイルをアップロードすることはできません。これは、StackOverflow で何度も議論されています。いくつかの解決策があります：

  • 使用しているクライアント ブラウザが をサポートしている場合は、HTML5 File APIAJAX を使用してファイルをアップロードするために使用できます。
  • サポートしていない場合はUploadify、BlueImp 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 が言ったように、これは実際には一度に 1 つのファイルしか処理せず、AJAX 呼び出しを処理しません。

于 2012-12-08T15:40:40.953 に答える