jQuery Ajax Datei-Upload

Question

Kann ich den folgenden jQuery-Code verwenden, um Datei-Upload mit POST-Methode einer Ajax-Anfrage durchzuführen?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

Wenn dies möglich ist, muss ich dann die data Teil? Ist das der richtige Weg? Ich POSTe die Datei nur an die Serverseite.

Ich habe herumgegoogelt, aber was ich gefunden habe, war ein Plugin, während ich es in meinem Plan nicht verwenden möchte. Zumindest für den Moment.

Answer 1

$("#submit_car").click(function() {
  var formData = new FormData($('#car_cost_form')[0]);
  $.ajax({
     url: 'car_costs.php',
     data: formData,
     contentType: false,
     processData: false,
     cache: false,
     type: 'POST',
     success: function(data) {
       // ...
     },
  });
});

edit: Inhaltstyp und Prozessdaten beachten Sie können dies einfach verwenden, um Dateien über Ajax hochzuladen...... submit input cannot be outside form element :)

Answer 2

Update 2019:

html

<form class="fr" method='POST' enctype="multipart/form-data"> {% csrf_token %}
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>

js

$(document).on('submit', '.fr', function(){

    $.ajax({ 
        type: 'post', 
        url: url, <--- you insert proper URL path to call your views.py function here.
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        data: new FormData(this) ,
        success: function(data) {
             console.log(data);
        }
        });
        return false;

    });

views.py

form = ThisForm(request.POST, request.FILES)

if form.is_valid():
    text = form.cleaned_data.get("text")
    example_image = request.FILES['example_image']

Answer 3

• Verwenden Sie einen versteckten iframe und setzen Sie das Ziel Ihres Formulars auf den Namen des iframe. Auf diese Weise wird beim Absenden des Formulars nur der iframe aktualisiert.
• Lassen Sie einen Ereignishandler für das Ladeereignis des iframe registrieren, um die Antwort zu analysieren.

Answer 4

Ich habe diese in einem einfachen Code behandelt. Sie können eine funktionierende Demo herunterladen von aquí

In Ihrem Fall sind diese sehr wohl möglich. Ich werde Sie Schritt für Schritt, wie Sie eine Datei auf den Server mit AJAX jquery hochladen können.

Erstellen wir zunächst eine HTML-Datei, um das folgende Formular-Dateielement hinzuzufügen (siehe unten).

<form action="" id="formContent" method="post" enctype="multipart/form-data" >
         <input  type="file" name="file"  required id="upload">
         <button class="submitI" >Upload Image</button> 
</form>

Erstellen Sie anschließend eine jquery.js-Datei und fügen Sie den folgenden Code hinzu, um die Übermittlung unserer Datei an den Server zu steuern

    $("#formContent").submit(function(e){
        e.preventDefault();

    var formdata = new FormData(this);

        $.ajax({
            url: "ajax_upload_image.php",
            type: "POST",
            data: formdata,
            mimeTypes:"multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function(){
                alert("file successfully submitted");
            },error: function(){
                alert("okey");
            }
         });
      });
    });

Das war's. Mehr sehen

Answer 5

Mit FormData ist der Weg zu gehen, wie von vielen Antworten angegeben. hier ist ein bisschen Code, der für diesen Zweck funktioniert gut. Ich stimme auch mit dem Kommentar der Verschachtelung von Ajax-Blöcken, um komplexe Umstände zu vervollständigen. Durch die Einbeziehung von e.PreventDefault(); meiner Erfahrung nach macht den Code mehr Cross-Browser kompatibel.

    $('#UploadB1').click(function(e){        
    e.preventDefault();

    if (!fileupload.valid()) {
        return false;            
    }

    var myformData = new FormData();        
    myformData.append('file', $('#uploadFile')[0].files[0]);

    $("#UpdateMessage5").html("Uploading file ....");
    $("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");

    myformData.append('mode', 'fileUpload');
    myformData.append('myid', $('#myid').val());
    myformData.append('type', $('#fileType').val());
    //formData.append('myfile', file, file.name); 

    $.ajax({
        url: 'include/fetch.php',
        method: 'post',
        processData: false,
        contentType: false,
        cache: false,
        data: myformData,
        enctype: 'multipart/form-data',
        success: function(response){
            $("#UpdateMessage5").html(response); //.delay(2000).hide(1); 
            $("#UpdateMessage5").css("background","");

            console.log("file successfully submitted");
        },error: function(){
            console.log("not okay");
        }
    });
});