私のファイルのアップロードが正常に動作しません

Question

私はファイルのアップロードを行っています。

この例では、私がやっているまさにほとんどです：https://stackoverflow.com/a/15680783/5874935

をしかし、何かが私のプロジェクトで起こっており、それが突然動作を停止しました。私は仕事をして問題を解決するために役に立たなかった。私は最近、フォームを送信するために、この機能を使用して、単一ページのアプリケーションに変換：

var ajaxFormSubmit = function (contentDiv, formDiv, modalId, formId, controllerPath) { 
     $(".loader").show(); 
     $("#".concat(formId)).on("submit", function (e) { 
      console.log("ajax form submitted"); 
      e.preventDefault(); // prevent standard form submission 
      var form = $(this); 
      $.ajax({ 
       url: form.attr("action"), 
       method: form.attr("method"), // post 
       data: form.serialize(), 
       error: function() { 
        $(".loader").hide(); 
        alert("An error occurred."); 
       }, 
       success: function (partialResult) { 
        console.log(partialResult.length); 

        if (partialResult.length === 0) { 
         console.log("form archhived"); 
         $("#".concat(modalId)).modal('hide'); 
         //forcing the backdrop to go away, something is wrong with the modal, it needs work. 
         $('.modal-backdrop').remove(); 
         getManager(controllerPath, contentDiv); 
         //get gunnery manager 
        } 
        else { 
         console.log("form came back"); 
         $("#".concat(formDiv)).html(partialResult); 
         $(".loader").hide(); 

        } 
       } 
      }); 
     }); 
    } 

モデル：

public class person 
{ 
public int id {get;set;} 
public string fName {get;set;} 
public string lName {get;set;} 
public HttpPostedFileBase attachment {get;set;} 
} 

ここでは私のコントローラ部分である：

if (model.attachment != null) 
       { 
        var file = model.attachment; 
         if (file.ContentLength > 0) 
         { 

          var path = Path.Combine(Server.MapPath("~/App_Data/uploads"),Path.GetFileName(file.FileName)); 
         file.SaveAs(path); 
         System.Diagnostics.Debug.WriteLine(path); 
         model.attachmentLink = path; 
        } 

      } 

私はそれを何conincidenceを見つけていません私のファイルのアップロードはこの周辺で動作しなくなりましたが、今注目しています。ファイルをアップロードするにはどうしたらいいですか？

ビューはhtmlヘルパーを使用すると非常に標準的です。

Answer 1

FormData

var ajaxFormSubmit = function (contentDiv, formDiv, modalId, formId, controllerPath) { 
      $(".loader").show(); 
      $("#".concat(formId)).on("submit", function (e) { 
       console.log("ajax form submitted"); 
       e.preventDefault(); // prevent standard form submission 
       var form = $(this); 
       var formData = new FormData(); // CREATE FORM DATA OBJECT 
       var fileUpload = $("#file").get(0); // your file element 
       var files = fileUpload.files; 
       formData.append("YOR_FILE_DATA_KEY_NAME", files[0]); 
       // add all form elements like following 
       // formData.append("key",value); 
        formData.append("id",$("#id").val()); // check the selector if it is correct 
        formData.append("fName",$("#fName").val()); 
        formData.append("lName",$("#lName").val()); 
       $.ajax({ 
        url: form.attr("action"), 
        method: "POST", // post 
        contentType: false, // Not to set any content header 
        processData: false, // Not to process data 
        data: formData, // pass this form data instead of form.serialize() 
        error: function() { 
         $(".loader").hide(); 
         alert("An error occurred."); 
        }, 
        success: function (partialResult) { 
         console.log(partialResult.length); 

         if (partialResult.length === 0) { 
          console.log("form archhived"); 
          $("#".concat(modalId)).modal('hide'); 
          //forcing the backdrop to go away, something is wrong with the modal, it needs work. 
          $('.modal-backdrop').remove(); 
          getManager(controllerPath, contentDiv); 
          //get gunnery manager 
         } 
         else { 
          console.log("form came back"); 
          $("#".concat(formDiv)).html(partialResult); 
          $(".loader").hide(); 

         } 
        } 
       }); 
      }); 
     } 

EDITを使用して、次の試してみてください：ソリューションをいるFormDataオブジェクトこの機能を使用する方法

function ConvertToFormData(serializedArray, fileInputID) 
{ 
var formData = new FormData(); 
//var serializedArray = $("form").serializeArray(); 
for(var i = 0; i < serializedArray.length;i++) 
{ 
    if(serializedArray[i].name != "FILE_INPUT_ELEMENT") // don't add file input here 
    formData.append(serializedArray[i].name,serializedArray[i].value); 

} 

var fileUpload = $(fileInputID).get(0); // your file element 
       var files = fileUpload.files; 
       formData.append(fileInputID, files[0]); 
return formData; 
} 

にform.seralizeを（）に変換するために？

var data = ConvertToFormData($("form").serializeArray(),"Your_file_input_id");