jQuery ajax, gửi biểu mẫu với tệp loại đầu vào và Json

Question

Tôi có biểu mẫu với một số yếu tố đầu vào và trường khác.

Tôi có một nút lưu, và khi tôi nhấp vào, tôi gửi mẫu với ajax với jQuery:

$.ajax({ 
     type:  "POST", 
     dataType: "json", 
     url:  $('#ajaxUrl').val(), 
     data:  "action=save&" + form.serialize() 
}); 

Vì vậy, khi tôi chỉ có đầu vào đơn giản như văn bản, chọn vv .. đó là ok. Nhưng nếu tôi có một tệp kiểu đầu vào, tôi không thể truy xuất tệp của mình. $ _FILES luôn trống.

Tôi có thể làm điều đó đơn giản nhất có thể bằng cách nào?

Chỉnh sửa: Tôi không muốn sử dụng một plugin :)

Answer 1

Tôi đã sử dụng jQuery plugin này trong đó có khả năng để upload files.

HTML:

<form action="file-echo2.php" method="post" enctype="multipart/form-data"> 
    <input type="file" name="myfile"><br> 
    <input type="submit" value="Upload File to Server"> 
</form> 

Javascrtipt:

$('form').ajaxForm({ 
    beforeSend: function() { 

    }, 
    uploadProgress: function(event, position, total, percentComplete) { 

    }, 
    success: function() { 

    }, 
    complete: function(xhr) { 

    } 
}); 

Answer 2

form.serialize không quản lý đầu vào tập tin. Bạn sẽ phải có một XMLHttpRequest với formData như adeneo gợi ý, xem example usage here. Đối với các trình duyệt cũ hơn, có các giải pháp sử dụng iframe và POST biểu mẫu với iframe làm mục tiêu. Một số plugin jquery sẽ làm tất cả những gì cho bạn, như, nói, JQuery-File-Upload (nhưng nhiều người khác tồn tại).

Answer 3

Tôi đã tìm thấy điều này little "vanilla" framework bằng cách truy vấn "Sử dụng đối tượng FormData" trên google.

sử dụng bởi:

AJAXSubmit(myForm); 

chỉ sửa đổi trên

function ajaxSuccess(){/*here*/} 

nếu bạn console.log() các phản ứng trên ajaxSuccess bạn có thể xem dữ liệu gửi đến máy chủ. Nó nằm trên tài sản submittedData.

Answer 4

thực hiện cho ASP.NET MVC:

Để bắt đầu kiếm của bạn hình thức-wrapper:

<form id="inputform"> 
    <input class="hide" type="file" name="file" id="file" /> 
</form> 

Сreate một client-handler để gửi:

$("#yourButton").bind('click', function() { 
    var data = new window.FormData($('#inputform')[0]); 
    $.ajax({ 
     xhr: function() { 
      return $.ajaxSettings.xhr(); 
     }, 
     type: "POST", 
     data: data, 
     cache: false, 
     contentType: false, 
     processData: false, 
     url: "@Url.Action("MethodName", "ControllerName")", 
     success: function() { }, 
     error: function() { }, 
    }); 
}); 

Đỗ xử lý trên máy chủ bên (bộ điều khiển):

public ActionResult MethodName(HttpPostedFileWrapper file) { 
    var img = Image.FromStream(file.InputStream); 
     .... 
     return ..; 
    } 

Tôi hy vọng điều này sẽ giúp bạn tiết kiệm thời gian;)