ajaxでファイルを投稿するには？

Question

ファイルをdbに保存しようとしています。私はjavascriptを使ってformDataを使ってファイルを追加し、これをajax経由でポストオブジェクトとして追加しています。何らかの理由で何も送られません。

私は間違っていますか？

HTML

<input type="file" style="display: none;" class="btn btn-primary uploadFile"> 

スクリプト：

 addUploadFiles: function (files, data) { 
      $.each(files, function (i, v) { 
       var file = $(this).data("files"); 
       data.append("file", file); 
      }); 

      return data; 
     } 

postUserData：

postUserData: function(url, data, callback) { 

     $.LoadingOverlay("show"); 
     $.ajax({ 
      url: url, 
      type: 'POST', 
      data: data, 
      cache: false, 
      processData: false, 
      contentType: false, 
      dataType: "HTML", 
      success: function(data) { 

       if (callback) { 
        callback(data); 
        $.LoadingOverlay("hide"); 
       } 

      }, 
      error: function(event, jqxhr, settings, thrownError) { 
       //$.helpers.errorHandler($("#fileDialogErrors"), event.responseText); 
       var h; 
       $.LoadingOverlay("hide"); 
      } 
     }); 
    }, 

のような見た目以上

 $(".saveImage") 
      .on("click", 
       function() { 
        var files = $(".uploadFile"); 
        var data = new FormData(); 


        data = $.OverWatch.worker.uploadFileHandler.addUploadFiles(files, data); 


        $.OverWatch.worker.postUserData("/Administration/AddUserImage", data, function() { 
         alert("done"); 
        }); 

       }); 

機能

バックエンド：

public ActionResult AddUserImage() 
    { 
     if (Request.Files.Count != 0) 
     { 
      //save 
     } 

     return null; 
    } 

編集：

var files = $(".uploadFile"); 

リターン：

Answer 1

あなたvar file = $(this).data("files");ラインはundefinedを返すことになります。

は

$.each(files, function (i, v) { 
    for (i = 0; i < v.files.length; i++) { 
     var file = v.files[i]; 
     data.append("file", file); 
    } 
}); 

にあなたのループを変更

しかし、あなたは（詳細については、how to append whole set of model to formdata and obtain it in MVCを参照してください）FormDataには、ファイルの入力を含むコントロールを形成するすべてをシリアライズなるvar data = new FormData($('form').get(0));を使用してこれを簡素化することができます。

私はまた、あなたのメソッドのシグネチャが

public ActionResult AddUserImage(IEnumerable<HttpPostedFileBase> files) 

に変更し、DefaultModelBinderはその魔法をやらせるお勧めします。

Answer 2

私はjQueryを使ってそれをやったが単なるを使用して、昨日、それを自分で行う方法を学んでいません古いjavascript ...次は私のために働いた。あなたはjqueryのに固執したい場合は、多分あなたが必要なものに機能を変換することができます：上記のコードを使用すると、あなたのために働く場合

var formElement = document.querySelector("form"); 
var payload = new FormData(formElement); 

function onStateChange(ev) { 
    // Check if the request is finished 
    if (ev.target.readyState == 4) { 
     editor.busy(false); 
     if (ev.target.status == '200') { 
      // Save was successful, notify the user with a flash 

     } else { 
      // Save failed, notify the user with a flash 

     } 
    } 
}; 

xhr = new XMLHttpRequest(); 
xhr.addEventListener('readystatechange', onStateChange); 
xhr.open('POST', '/posts'); 
xhr.send(payload); 

は多分（それはちょうどあなたが同じページに持っているフォームを対象）を参照してください、問題のスクリプトかバックエンド/通信の問題かをトラブルシューティングできます。 （あなたがdata値を加算し、いくつかの他のJavaScriptを持っていますが、あなたはそれがどのような場合には、それはファイルを返すことはないdataにファイルを追加することはできませんしない限り）コードの

Answer 3

Request.Files

//(Request) HttpRequestBase object for the current HTTP request 
if (Request.Files.Count > 0)//// Is image is uplaod by browse button 
{ 
    var inputStream = Request.Files[0].InputStream; 
    using (var binaryReader = new BinaryReader(inputStream)) 
    { 
     var ImageBytes = binaryReader .ReadBytes(Request.Files[0].ContentLength); // same as you can get multiple file also 
    } 
    var fileExtension = Path.GetExtension(Request.Files[0].FileName); 
} 

感謝を使用して呼び出されたとき、あなたは直接コントローラからファイルを取得することができます。