it-swarm.com.de

Hochladen von Daten und Dateien in einem Formular mit Ajax?

Ich verwende jQuery und Ajax für meine Formulare, um Daten und Dateien zu übermitteln, aber ich bin nicht sicher, wie ich Daten und Dateien in einem Formular senden kann.

Ich mache derzeit fast das gleiche mit beiden Methoden, aber die Art und Weise, wie die Daten in einem Array gesammelt werden, ist unterschiedlich. Die Daten verwenden .serialize();, aber die Dateien verwenden = new FormData($(this)[0]);.

Kann man beide Methoden kombinieren, um Dateien und Daten in einem Formular über Ajax hochladen zu können?

Daten jQuery, Ajax und html

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

Dateien jQuery, Ajax und html

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Wie kann ich das Obige kombinieren, um Daten und Dateien in einer Form über Ajax zu senden?

Mein Ziel ist es, all dieses Formular in einem Post mit Ajax senden zu können, ist das möglich?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>
325
Dan

Das Problem, das ich hatte, war die falsche jQuery-Kennung.

Sie können Daten und Dateien hochladen mit einem Formular mit ajax .

PHP + HTML

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

jQuery + Ajax

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Kurze Version

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});
409
Dan

eine andere Option besteht darin, einen iframe zu verwenden und das Ziel des Formulars darauf zu setzen.

sie können dies versuchen (es verwendet jQuery):

function ajax_form($form, on_complete)
{
    var iframe;

    if (!$form.attr('target'))
    {
        //create a unique iframe for the form
        iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));
        $form.attr('target', iframe.attr('name'));
    }

    if (on_complete)
    {
        iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');
        iframe.load(function ()
        {
            //get the server response
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

es funktioniert gut mit allen Browsern, Sie müssen die Daten nicht serialisieren oder vorbereiten. Ein Nachteil ist, dass Sie den Fortschritt nicht überwachen können.

außerdem wird die Anforderung zumindest für Chrome nicht auf der Registerkarte "xhr" der Entwicklerwerkzeuge angezeigt, sondern unter "doc".

30
Roey

Oder kürzer:

$("form#data").submit(function() {
    var formData = new FormData($(this)[0]);
    $.post($(this).attr("action"), formData, function() {
        // success    
    });
    return false;
});
14
schaenk

Ich hatte das gleiche Problem in ASP.Net MVC mit HttpPostedFilebase und anstelle des Formulars beim Senden musste ich die Schaltfläche beim Klicken verwenden, wo ich einige Dinge tun musste

$(".submitbtn").on("click", function(e) {

    var form = $("#Form");

    // you can't pass Jquery form it has to be javascript form object
    var formData = new FormData(form[0]);

    //if you only need to upload files then 
    //Grab the File upload control and append each file manually to FormData
    //var files = form.find("#fileupload")[0].files;

    //$.each(files, function() {
    //  var file = $(this);
    //  formData.append(file[0].name, file[0]);
    //});

    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: $(form).prop("action"),
            //dataType: 'json', //not sure but works for me without this
            data: formData,
            contentType: false, //this is requireded please see answers above
            processData: false, //this is requireded please see answers above
            //cache: false, //not sure but works for me without this
            error   : ErrorHandler,
            success : successHandler
        });
    }
});

das MVC-Modell wird dann korrekt aufgefüllt. Stellen Sie in Ihrem Modell sicher, dass die Eigenschaft für HttpPostedFileBase [] den gleichen Namen wie der Name des Eingabesteuerelements in HTML hat.

<input id="fileupload" type="file" name="UploadedFiles" multiple>

public class MyViewModel
{
    public HttpPostedFileBase[] UploadedFiles { get; set; }
}
5
h_power11

Für mich funktionierte es nicht ohne das enctype: 'multipart/form-data'-Feld in der Ajax-Anfrage. Ich hoffe, es hilft jemandem, der in einem ähnlichen Problem steckt.

Obwohl enctype bereits im Formularattribut festgelegt war, konnte die Ajax-Anforderung aus bestimmten Gründen die enctype nicht ohne explizite Deklaration (jQuery 3.3.1) automatisch identifizieren.

// Tested, this works for me (jQuery 3.3.1)

fileUploadForm.submit(function (e) {   
    e.preventDefault();
    $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                console.log('Thank God it worked!');
            }
        }
    );
});

// enctype field was set in the form but Ajax request didn't set it by default.

<form action="process/file-upload" enctype="multipart/form-data" method="post" >

     <input type="file" name="input-file" accept="text/plain" required> 
     ...
</form>

Bitte beachten Sie auch die Felder contentType und processData.

0
Adithya Upadhya

Für mich folgende Code-Arbeit 

  $(function () {
    debugger;
    document.getElementById("FormId").addEventListener("submit", function (e) {
        debugger;
        if (ValidDateFrom()) { // Check Validation 
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                debugger;
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action);
                    xhr.onreadystatechange = function (result) {
                        debugger;
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            debugger;
                            var responseData = JSON.parse(xhr.responseText);
                            SuccessMethod(responseData); // Redirect to your Success method 
                        }
                    };
                    xhr.send(new FormData(form));
                }
            }
        }
    }, true);
});

Übergeben Sie in Ihrer Action Post-Methode den Parameter als HttpPostedFileBase UploadFile, und stellen Sie sicher, dass Ihre Dateieingabe dieselbe wie in Ihren Parametern der Action-Methode angegeben hat. Es sollte auch mit AJAX funktionieren. Beginnen Sie auch mit dem Formular. 

Denken Sie daran, dass Ihr AJAX BEGIN-Formular hier nicht funktioniert, da Sie in dem oben genannten Code einen Post-Aufruf durchführen und Ihre Methode entsprechend der Anforderung im Code referenzieren können

Ich weiß, dass ich spät antworte, aber das hat bei mir funktioniert

0
   <form id="form" method="post" action="otherpage.php" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button type='button' id='submit_btn'>Submit</button>
</form>

<script>
 $(document).on("click","#submit_btn",function(e){  
     //Prevent Instant Click  
    e.preventDefault();
    // Create an FormData object 
        var formData =$("#form").submit(function(e){
            return ;
        });
      //formData[0] contain form data only 
      // You can directly make object via using form id but it require all ajax operation inside $("form").submit(<!-- Ajax Here   -->)
        var formData = new FormData(formData[0]);    
        $.ajax({
            url: $('#form').attr('action'),
            type: 'POST',
            data: formData,
            success: function(response) {console.log(response);},
            contentType: false,
            processData: false,
            cache: false
        });
        return false;
            });
</script>

///// otherpage.php

<?php
print_r($_FILES);
?>
0