12

Ajax.BeginForm() を使用してファイルをアップロードしようとしていますが、うまくいきません。

私の見解には以下が含まれます：

@using (Ajax.BeginForm("UploadFile", null, new AjaxOptions { HttpMethod="POST",     UpdateTargetId = "result" }, new { enctype = "multipart/form-data" }))
{
   <label id="lblUploadNewFile" for="fileUploadControl">Upload New File&lt;/label>
   <input type="file" name="fileToUpload" id="fileUploadControl"/>
   <input id="btnFileUpload" type="submit" value="Upload" />
   <span id="result" />
}

対応するコントローラーは次のとおりです。

[HttpPost]
public string UploadFile(FormCollection formData)
{
   HttpPostedFileBase file=null;

   try
   {
      file = Request.Files[0];
   }
   catch { }

   if ( file!=null &amp;&amp; file.ContentLength &gt; 0)
   {
      file.SaveAs(string.Concat(
            AppDomain.CurrentDomain.BaseDirectory,
            Path.GetFileName(file.FileName)));

      return &quot;Successfully Uploaded&quot;;
   }
   else
   {
      return &quot;Upload Failed, please try again.&quot;;
   }
}

問題は、ファイルをアップロードしていることですが、削除すると非同期投稿が行われなくなりますjquery.unobtrusive-ajax.js。代わりに、完全なポストバックを行います。

ビューに追加するjquery.unobtrusive-ajax.jsと、非同期で実行されますが、フォーム データでアップロード ファイルが送信されません。でサーバーにファイルが送信されていませんRequest.Files[]。

4

4 に答える 4

17

AJAX を使用してファイルをアップロードすることはできません。これはサポートされていません。そうしたい場合は、UploadifyまたはBlueimp File Uploadなどのファイル アップロード プラグインを使用するHTML 5 File APIか、クライアント ブラウザがサポートしている場合は を使用できます。

于 2013-06-11T06:44:19.010 に答える
10

これは、追加のライブラリなしで実行できます。

この小さなハックに出くわしました。これでうまく解決します

window.addEventListener("submit", function (e) {
    var form = e.target;
    if (form.getAttribute("enctype") === "multipart/form-data") {
        if (form.dataset.ajax) {
            e.preventDefault();
            e.stopImmediatePropagation();
            var xhr = new XMLHttpRequest();
            xhr.open(form.method, form.action);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (form.dataset.ajaxUpdate) {
                        var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                        if (updateTarget) {
                            updateTarget.innerHTML = xhr.responseText;
                        } 
                    }
                }
            };
            xhr.send(new FormData(form));
        }
    }
}, true);

http://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-workingが見つかりました

于 2014-12-18T11:50:45.910 に答える