사용자가 파일을 업로드 할 수있게하려고합니다. 파일이 "null"(ASP.Net/MVC/C#)이됩니다.

Question

업로드 할 이미지 (DefectImage 내 모델)를 선택할 수있는 양식의 페이지가 있습니다. 불행하게도, 컨트롤러에서 DefectImage은 확실히 파일을 선택하고 있지만 "null"로 표시됩니다. 제출을 누르기 전에 텍스트 상자에도 파일 이름이 표시됩니다.

모델

public class CreateReportViewModel 
{ 
    [Required] 
    [Display(Name = "Description")] 
    [StringLength(500)] 
    public string Description { get; set; } 

    [Required] 
    [Display(Name = "Electrode Image")] 
    public HttpPostedFileBase DefectImage { get; set; } 

} 

보기

@using (Ajax.BeginForm("createreport", "wip", new { id = ViewBag.Id, enctype = "multipart/form-data" }, ajaxOpts, new { @id = "form-create" })) 
{ 

    <div class="form-group row"> 
     @Html.LabelFor(m => m.Description, new { @class = "col-sm-4 text-sm-right" }) 
     <div class="col-sm-6 col-md-5"> 
      @Html.TextAreaFor(m => m.Description, new { @class = "form-control form-control-sm" }) 
      <p> 
       @Html.ValidationMessageFor(m => m.Description) 
      </p> 
     </div> 
    </div> 

<div class="form-group row"> 
    @Html.LabelFor(m => m.DefectImage, new { @class = "col-sm-4 text-sm-right" }) 
    <div class="col-sm-6 col-md-5"> 
     @Html.TextBoxFor(m => m.DefectImage, new { type = "file", @class = "form-control form-control-sm" }) 
     <p> 
      @Html.ValidationMessageFor(m => m.DefectImage) 
     </p> 
    </div> 
</div> 

    <div class="row form-group-buttons"> 
     <div class="col-sm-8 col-sm-offset-4"> 
      <button id="btn-submit" type="submit" class="btn btn-sm btn-success">Submit</button> 
     </div> 
    </div> 
} 

컨트롤러

[HttpPost] 
public ActionResult CreateReport(CreateReportViewModel model) 
{ 
    GenericResultModel jsonResponse = new GenericResultModel(); 

    if (ModelState.IsValid) 
    { 
     byte[] uploadedImage = new byte[model.DefectImage.InputStream.Length]; 
     model.DefectImage.InputStream.Read(uploadedImage, 0, uploadedImage.Length); 

     try 
     { 
      // send file to DB 
      jsonResponse.IsOK = true; 
     } 
     catch 
     { 
      // Exception 
      jsonResponse.IsOK = false; 
     } 
    } 
    return Json(jsonResponse, JsonRequestBehavior.AllowGet); 
} 

내가 단계별,어떤 이유로 든 내 파일 (필수)이 null이기 때문에 컨트롤러의은 false으로 평가됩니다. Description은 정상적으로 처리되지만 DefectImage은 처리되지 않습니다.

무엇이 여기에 있습니까?

Answer 1

enctype은 잘못된 위치에 있습니다. 경로 값에 넣었지만 HTML 속성입니다.

그래서 :

@using (Ajax.BeginForm("createreport", "wip", 
    new { id = ViewBag.Id, enctype = "multipart/form-data" }, 
    ajaxOpts, 
    new { @id = "form-create" })) 

은 다음과 같아야합니다

@using (Ajax.BeginForm("createreport", "wip", 
    new { id = ViewBag.Id }, 
    ajaxOpts, 
    new { @id = "form-create", enctype = "multipart/form-data" })) 

Answer 2

@Johnny 오른쪽이지만, 그 문제의 일부에 불과합니다. 파일은 AJAX로 매우 특별한 방식으로 제출되어야하며, AJAX 도우미는이를 지원하지 않습니다. 또한 AJAX 업로드는 일반적으로 최신 브라우저에서만 지원되므로 IE 9 이하는 적용 할 필요가 없다는 것을 명심해야합니다.

document.getElementById('MyForm').addEventListener('submit', function (e) { 
    e.preventDefault(); 
    var form = this; 

    var formData = FormData(form); 

    var files = document.getElementById('MyFileInput').files; 
    for (var i = 0; i < files.length; i++) 
    { 
     formData.append('files[]', files[i], files[i].name); 
    } 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', form.action, true); 
    xhr.onload = function() { 
     if (xhr.status === 200) { 
      // File(s) uploaded. 
     } else { 
      alert('An error occurred!'); 
     } 
    }; 
    xhr.send(formData); 
}); 

:

AJAX를 업로드하려면 다음을 수행해야