jQuery를 통해 파일을 업로드하는 방법은 무엇입니까?

Question

나는 jQuery ajax와 같은 방식으로이 작업을 수행하는 방법에 대해 궁금합니다. 지금 나는 jQuery UI 대화 상자 팝업이 있고 그것에 HTML 입력 파일이있다.

사용자가 가져 오기를 클릭하면 jQuery를 사용하여 서버에 아약스 게시물을 게시하려고합니다.

내 동작보기로 파일을 전달하는 방법을 잘 모르겠습니다.

는 지금은

그래서

public ActionResult Import(HttpPostedFileBase file) 

내가 jQuery를하고 함께 HttpPostedFileBase에 전달하는 방법을 잘 모르겠습니다 그래서 내 컨트롤러에서 다음이

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{%> 
    <br /> 
    <p><input type="file" id="file" name="file" size="23 accept="text/calendar"></p><br /> 
    <p><input type="submit" value="Upload file" /></p>   

<% } %> 

이 그것을 다시 전체 게시물을하고있다 jQuery에서 enctype = "multipart/form-data"을 설정하는 방법.

편집이 좋아 잘 jQuery를 양식 플러그인은 길을 가야하는 것 같다.

$('#frm_ImportCalendar').livequery(function() 
{ 
    var options = { 
     dataType: 'json', 
     success: function(response) 
     { 
      alert(response); 
     } 
    }; 

    $(this).ajaxForm(options); 
}); 

내 json이 작동하지 않는 이유가 궁금 해서요. 누군가 당신이 언급 한대로 그대로 사용할 수 없습니다. 누군가가 json을 사용할 수 있었던 다른 링크를 확인하고 있습니다.

Lck에서 ajax 제출 메소드 전에 .submit을 사용하는 이유는 확실하지 않습니다.

편집

어떻게 내 사전 배열을 반환하는 파일 업로드 JSON 결과를 바꿀 수 있을까?

 Dictionary<string, string> result = new Dictionary<string, string>(); 
     result.Add("Msg", "Success!!"); 
     result.Add("Body", calendarBody); 

// how can I change this? 
    return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully.", System.IO.Path.GetFileName(file.FileName)) } }; 

Answer 1

jQuery Form Plugin을 사용하면 비동기 파일 업로드를 수행 할 수 있습니다. 체크 아웃 아래의 링크를

jQuery를 양식 플러그인 - 코드 샘플 - 파일 업로드 http://jquery.malsup.com/form/#file-upload

행운을 빕니다!

Answer 2

Dominic에서 제안한대로 jQuery Form plugin을 사용하십시오. 이미 작성한 양식이 이미 올바르게 작동해야합니다.

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { id = "asyncForm", enctype = "multipart/form-data" })) 

및 데이터 게시 할 jQuery를 양식을 사용 : 그냥 정확히 식별 할 수있는 ID를 추가 파일을 을 업로드 형태의 반환 데이터 형식 JSON하지 수

$(document).ready(function(){ 
    $('#asyncForm').submit(function(){ 
     $(this).ajaxSubmit({ 
      beforeSubmit: function(){ 
       //update GUI to signal upload 
      } 
      data: { additional = 'value' }, 
      dataType: 'xml', 
      success: function(xml){ 
       //handle successful upload 
      } 
     }); 
    }); 
}); 

참고. 컨트롤러 메소드에서 XML 또는 HTML을 응답으로 사용하십시오.

Answer 3

jQuery Form plugin과 사용자 정의 JsonResult 클래스를 사용하여 AJAX를 통해 파일을 업로드 할 수 있습니다 (here).

사용이 당신의 사전

return new FileUploadJsonResult { Data = new { Msg = "Success!!", Body = calendarBody } }; 

처럼 뭔가를 반환하고 난 그냥 권자 JSON을 반환하지 않습니다 왜 물어 여기에오고

success: function(result) { 
    $("#ajaxUploadForm").unblock(); 
    $("#ajaxUploadForm").resetForm(); 
    alert(result.Msg); 
}