Cách tải lên tệp thông qua jQuery?

Question

Tôi tự hỏi làm thế nào tôi sẽ làm điều này với như jQuery ajax. Ngay bây giờ tôi có một hộp thoại jQuery ui và nó có một tệp đầu vào html trên đó.

Bây giờ khi người dùng nhấp vào nhập, tôi muốn đăng bài ajax lên máy chủ bằng jQuery.

Tôi không chắc chắn cách chuyển tệp vào chế độ xem tác vụ của mình.

Ngay bây giờ tôi có nó làm một bài đầy đủ trở lại vì vậy tôi có điều này

<% 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>   

<% } %> 

Sau đó, trong điều khiển của tôi

public ActionResult Import(HttpPostedFileBase file) 

Vì vậy, tôi không chắc chắn làm thế nào để vượt qua trong một HttpPostedFileBase với jQuery và làm thế nào để thiết lập enctype = "multipart/form-data" trong jQuery.

Sửa

Ok cũng dưới hình thức jQuery plugin có vẻ là con đường để đi.

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

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

Tôi đã tự hỏi tại sao json của tôi không hoạt động nhưng ai đó đã đề cập đến bạn không thể sử dụng nó giống như. Tôi đang kiểm tra các liên kết khác, nơi ai đó đã có thể sử dụng json.

Tôi không chắc chắn tại sao trong Lck được sử dụng. Gửi trước phương thức gửi ajax.

Sửa

Làm thế nào tôi có thể thay đổi kết quả json tập tin tải lên trở lại mảng từ điển của tôi?

 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

Sử dụng plugin biểu mẫu jQuery, bạn có thể tải lên tệp không đồng bộ. Check-out liên kết sau,

jQuery Mẫu Plugin - Mã Samples - File uploads http://jquery.malsup.com/form/#file-upload

Chúc may mắn!

Answer 2

Theo đề xuất của Dominic, hãy sử dụng jQuery Form plugin. Biểu mẫu bạn đã tạo nên đã hoạt động chính xác. Chỉ cần thêm một ID để xác định nó:

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

và sử dụng jQuery Form để gửi dữ liệu:

$(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 
      } 
     }); 
    }); 
}); 

Lưu ý rằng datatype trở lại trong các hình thức upload file không có thể JSON. Sử dụng XML hoặc HTML làm phản hồi trong phương thức của trình điều khiển của bạn.

Answer 3

Tôi có thể tải lên tệp qua AJAX bằng cách sử dụng jQuery Form plugin và lớp JsonResult tùy chỉnh như được mô tả here.

Sử dụng này để trả lại một cái gì đó giống như từ điển của bạn

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

và để có được thông điệp của bạn trong hàm callback

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