2013-09-02 80 views
6

私はAngularをMVCと組み合わせて使用​​します。ファイルをアップロードする場合、HttpPostedFileBaseはnullです。ファイルをアップロードするときにHttpPostedFileBaseがnullになります。

HTML:

<input type="file" data-ng-model="fileName" onchange="angular.element(this).scope().fileInputChanged(this)"> 

角度:

scope.fileInputChanged = function (element) { 
    scope.$apply(function (scope) { 
     console.log('files:', element.files); 

     _.each(element.files, function (element, index, list) { 
      scope.files.push(element); 
     }); 
    }); 
} 

scope.uploadDocuments = function() { 
    var formData = new FormData(); 

    // add uploaded files to form data object 
    for(var i in scope.files){ 
     formData.append("uploadedFile", scope.files[i]); 
    } 

    // create xml http request object 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.upload.addEventListener("progress", uploadProgress, false); 
    httpRequest.addEventListener("load", uploadComplete, false); 
    httpRequest.addEventListener("error", uploadFailed, false); 
    httpRequest.addEventListener("abort", uploadCanceled, false); 
    httpRequest.open("POST", "/Customer/UploadDocuments"); 

    // make progress bar visible 
    scope.progressVisible = true; 

    // send the request to the server with the form data 
    httpRequest.send(formData); 
} 

// Private functions 
function uploadProgress(event) { 
    scope.$apply(function() { 
     if (event.lengthComputable) { 
      scope.progressValue = Math.round(event.loaded * 100/event.total); 
     } 
     else { 
      scope.progressValue = "Kan progressie niet berekenen"; 
     } 
    }); 
} 

function uploadComplete(event) { 
    scope.hideForm(false); 
} 

function uploadFailed(event) { 
    alert("Het uploaden van de documenten is mislukt."); 
} 

function uploadCanceled(event) { 
    scope.$apply(function() { 
     scope.progressVisible = false; 
    }); 
} 

MVC:ここ

public void UploadDocuments(HttpPostedFileBase file) 
{ 

} 

は私のリクエストヘッダがどのように見えるかです:

Accept:*/* 
Accept-Encoding:gzip,deflate,sdch 
Accept-Language:en-US,en;q=0.8,nl;q=0.6 
Connection:keep-alive 
Content-Length:380863 
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryc67wmYYq1T5VAMlT 
Cookie:ASP.NET_SessionId=rgwgky0zymvb2ppg3jozrn2s; __ngDebug=false; .ASPXAUTH=A54883879090E307D871F8293C805B3B50D1DDFAD1CE5B05D7284426D895370CBBD75D25B7012D384A69CAB265783BDA8F05B1BA02E0121814F45B39E15520EC35408F19DF3345B5DB7F5502886D8696 
Host:localhost:15982 
Origin:http://localhost:15982 
Referer:http://localhost:15982/ 
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36 

そしてここペイロード:

------WebKitFormBoundaryc67wmYYq1T5VAMlT 
Content-Disposition: form-data; name="uploadedFile"; filename="deukjes_deur_2.jpg" 
Content-Type: image/jpeg 

私はこの作業を取得するためにしなければならないのですか?

答えて

7

これは、フォームデータにuploadedFileという名前を付けたためですが、アクションにはfileというパラメータが使用されています。次のようにパラメータ名を変更してください:

public void UploadDocuments(HttpPostedFileBase uploadedFile) 
{ 
} 
+0

私は自分自身を考え出しました。私はこの質問を投稿したときにそれを見た。とにかくありがとう!! – Martijn

+0

私はちょうど私が持っていた非常にイライラの問題を解決したと言いたかった!それでは本当にありがとう!私はこれを、これを実装しようとする問題を抱えている人々の90%が経験している問題であると推測します。だから私はこの答えがより多くの可視性を得ることを願っています! – Brandon

+0

@Brandonそれが助けてくれてうれしい、私はそれを自分で直すのをとても長い間苦労してしまったので、これを最初に探すことしか知りません:)。これは非常に一般的な原因です(ファイルだけでなく)投稿の値がnullの場合、 – mattytommo

関連する問題