jak zrobić przesyłać za pomocą pliku jquery serializacji

Question

Więc mam formularz, a ja wysłaniu formularza przez ajax przy użyciu jQuery serializacji funkcji

 serialized = $(Forms).serialize(); 

     $.ajax({ 

     type  : "POST", 
     cache : false, 
     url  : "blah", 
     data  : serialized, 
     success: function(data) { 

     } 

ale co wtedy, gdy postać ma pole <input type="file"> .... jak mogę przekazać plik do formularza przy użyciu tej metody serializacji ajax ... drukowanie $ _FILES nie wypisuje niczego

Answer 1

Plik nie może zostać przesłany za pomocą AJAX, ponieważ nie można uzyskać dostępu do zawartości pliku przechowywanego na komputerze klienckim i wysłać go w żądaniu przy użyciu javascript. Jedną z technik do osiągnięcia tego jest użycie ukrytych elementów iframe. Jest ładny jquery form plugin, który umożliwia AJAXify swoje formularze, a także supports file uploads, jak również. Więc za pomocą tej wtyczki kod będzie po prostu wyglądać następująco:

$(function() { 
    $('#ifoftheform').ajaxForm(function(result) { 
     alert('the form was successfully processed'); 
    }); 
}); 

Wtyczka automatycznie dba o zapisanie się na razie submit formularza, anulowanie złożenie domyślną szeregowania wartości, stosując odpowiednią metodę i uchwyt pliku Prześlij pola, ...

Answer 2

Możesz teraz przesyłać pliki z Ajax!

Przykłady:

https://stackoverflow.com/a/8758614/1072492

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

Answer 3

można przesyłać pliki za pośrednictwem AJAX przy użyciu metody FormData. Chociaż IE7,8 i 9 nie obsługują funkcji FormData.

$.ajax({ 
    url: "ajax.php", 
    type: "POST",    
    data: new FormData('form'), 
    contentType: false,  
    cache: false,    
    processData:false, 
    success: function(data) { 
     $("#response").html(data); 
    } 
}); 

Answer 4

To działa dla każdego rodzaju postaci

$(document).on("submit", "form", function(event) 
{ 
    event.preventDefault(); 

    var url=$(this).attr("action"); 
    $.ajax({ 
     url: url, 
     type: $(this).attr("method"), 
     dataType: "JSON", 
     data: new FormData(this), 
     processData: false, 
     contentType: false, 
     success: function (data, status) 
     { 

     }, 
     error: function (xhr, desc, err) 
     { 


     } 
    });   

}); 

Answer 5

HTML5 wprowadza FormData klasy, który może być używany do przesyłania plików z AJAX.

Obsługa FormData rozpoczyna się od następujących wersji przeglądarek komputerowych. 10+ IE, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

https://developer.mozilla.org/en/docs/Web/API/FormData/FormData

Answer 6

var form = $('#job-request-form')[0]; 
     var formData = new FormData(form); 
     event.preventDefault(); 
     $.ajax({ 
      url: "/send_resume/", // the endpoint 
      type: "POST", // http method 
      processData: false, 
      contentType: false, 
      data: formData, 

on pracował dla mnie! wystarczy ustawić processData i contentType False.

Answer 7

HTML

<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false"> 
    <input id="name" name="name" placeholder="Enter Name" type="text" value=""> 
    <textarea id="detail" name="detail" placeholder="Enter Detail"></textarea> 
    <select name="gender" id="gender"> 
     <option value="male" selected="selected">Male</option> 
     <option value="female">Female</option> 
    </select> 
    <input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/> 
</form> 

JavaScript

var data = new FormData(); 

//Form data 
var form_data = $('#my_form').serializeArray(); 
$.each(form_data, function (key, input) { 
    data.append(input.name, input.value); 
}); 

//File data 
var file_data = $('input[name="my_images"]')[0].files; 
for (var i = 0; i < file_data.length; i++) { 
    data.append("my_images[]", file_data[i]); 
} 

//Custom data 
data.append('key', 'value'); 

$.ajax({ 
    url: "URL", 
    method: "post", 
    processData: false, 
    contentType: false, 
    data: data, 
    success: function (data) { 
     //success 
    }, 
    error: function (e) { 
     //error 
    } 
}); 

PHP

<?php 
    echo '<pre>'; 
    print_r($_POST); 
    print_r($_FILES); 
    echo '</pre>'; 
    die(); 
?>