wie man Dateien mit jquery-Serialisierung hochlädt

Ich habe also ein Formular und sende das Formular über Ajax mit der Jquery-Serialisierungsfunktion

        serialized = $(Forms).serialize();

        $.ajax({

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

        }

aber was ist, wenn das Formular eine hat <input type="file"> Feld …. wie übergebe ich die Datei mit dieser Ajax-Serialisierungsmethode an das Formular … das Drucken von $_FILES gibt nichts aus

Benutzen FormData Objekt. Es funktioniert für jede Art von Formular

$(document).on("submit", "form", function(event)
{
    event.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

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

        }
    });        

});

Eine Datei kann nicht mit AJAX hochgeladen werden, weil Sie nicht auf den Inhalt einer Datei zugreifen können, die auf dem Client-Computer gespeichert ist, und sie in der Anfrage nicht mit Javascript senden können. Eine der Techniken, um dies zu erreichen, ist die Verwendung versteckter Iframes. Es gibt eine nette jquery-Formular-Plugin wodurch Sie Ihre Formulare und es AJAXify können unterstützt Datei-Uploads sowie. Wenn Sie dieses Plugin verwenden, sieht Ihr Code einfach so aus:

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

Das Plugin kümmert sich automatisch um das Abonnieren der submit Ereignis des Formulars, Abbrechen der Standardübermittlung, Serialisieren der Werte, Verwenden der richtigen Methode und Behandeln von Datei-Upload-Feldern, …

   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,

Bei mir hat es funktioniert! setze einfach processData und contentType auf False.

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();
?>

Sie können Dateien über AJAX hochladen, indem Sie die FormData-Methode verwenden. Obwohl IE7, 8 und 9 die FormData-Funktionalität nicht unterstützen.

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

$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
    type: "POST",
    data: formData,
    dataType: "json",
    url: form.attr('action'),
    processData: false,
    contentType: false,
    success: function(data) {
         alert('Sucess! Form data posted with file type of input also!');
    }
)};});

Durch die Nutzung new FormData() und Einstellung processData: false, contentType:false in Ajax-Call-Übermittlung des Formulars mit Dateieingabe funktionierte für mich

Mit dem obigen Code kann ich Formulardaten mit Dateifeld auch über Ajax senden

HTML5 stellt vor FormData Klasse, die zum Hochladen von Dateien mit Ajax verwendet werden kann.

Die FormData-Unterstützung beginnt ab den folgenden Desktop-Browser-Versionen. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

Formulardaten – Mozilla.org