2013-06-11 11 views
8

Ajax.BeginForm()を使用してファイルをアップロードしようとしていますが、機能しません。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[]のファイルがサーバーに送信されていません。

+1

を発見

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

を、それを解決し、この小さなハック、出くわした:あなたはページの帽子は、訪問者のファイルシステム上の任意のアクセス可能なファイルをアップロード構築できます彼に話すことなくサーバーに送信します。 – Robert

答えて

14

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

+0

返信いただきありがとうございましたDarrinに感謝します。私はBlueifyを実装しようとしています。 –

+0

私はjQuery-asyncUploadをstevenによって共有しています: http://blog.stevensanderson.com/2008/11/24/jquery-ajax-uploader-plugin-with-progress-bar/ –

+0

@Darin Dimitrov、私はドンあなたの答えを理解していない。 [この他のStackOverflowの質問](http://stackoverflow.com/questions/19042116/ajax-beginform-in-mvc-to-upload-files)によれば、ファイルのアップロードは実際にサポートされています。その他の答え。あなたが言うことを明確にしていただけますか? –

9

追加のライブラリなしでこれを行うことができます。

私はそれは明白な理由のためのAjaxとはできませんうまくhttp://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working

+1

「http:// www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working」はもう存在しません。 Stack Overflowをコピーするスクレイパーサイトでしたが、実際に[この投稿](https://stackoverflow.com/questions/14972470/c-sharp-mvc3-ajax-beginform-to-upload-file-not-working)が見つかりました。 –

+1

あなたが誰であれ私はあなたを見つけてあなたを愛するでしょう! –

+0

しかし、フォームのコールバックを実装する方法? –

関連する問題