Wie kann ich Dateien mit jQuery asynchron hochladen?

Question

Ich möchte eine Datei asynchron mit jQuery hochladen.

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Daten hochgeladen: ");
            }
        });
    });
});

Datei

Statt die Datei hochzuladen, erhalte ich nur den Dateinamen. Was kann ich tun, um dieses Problem zu beheben?

Answer 1

Dieses AJAX-Datei-Upload jQuery-Plugin lädt die Datei irgendwo hoch und übergibt die Antwort an einen Callback, nichts weiter.

• Es hängt nicht von bestimmtem HTML ab, geben Sie einfach ein
• Es erfordert nicht, dass Ihr Server in einer bestimmten Weise antwortet
• Es spielt keine Rolle, wie viele Dateien Sie verwenden oder wo sie auf der Seite sind

-- Verwenden Sie so wenig wie --

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

-- oder so viel wie --

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('benutzerdefinierter Handler für Datei:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // Abbruch des Uploads
  },
  'onCancel': function() {
    console.log('keine Datei ausgewählt');
  }
});

Answer 2

Ich habe das folgende Skript verwendet, um Bilder hochzuladen, was anscheinend gut funktioniert.

HTML

JavaScript

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Erfolgreich hochgeladen");
                        }
                    });
                }
            }
            else
            {
                alert('Kein gültiges Bild!');
            }
        }

    }, false);
});

Erklärung

Ich verwende das response div, um die Upload-Animation und die Antwort nach dem Upload anzuzeigen.

Der beste Teil ist, dass Sie zusätzliche Daten wie IDs usw. mit der Datei senden können, wenn Sie dieses Skript verwenden. Ich habe es im Skript als extra-data erwähnt.

Auf PHP-Ebene funktioniert dies wie ein normaler Datei-Upload. extra-data kann als $_POST-Daten abgerufen werden.

Hier verwenden Sie kein Plugin oder ähnliches. Sie können den Code nach Ihren Wünschen ändern. Hier codieren Sie nicht blind. Dies ist die Kernfunktionalität eines jeden jQuery-Dateiuploads. Tatsächlich Javascript.

Answer 3

Sie können es ziemlich einfach in reinem JavaScript machen. Hier ist ein Ausschnitt aus meinem aktuellen Projekt:

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position / e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if (this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName', file.name); // Dateiname übergeben
xhr.send(file);

Answer 4

Sie können einfach mit jQuery .ajax() hochladen.

HTML:

        Datei:

CSS

.progress { display: none; }

Javascript:

$(document).ready(function(ev) {
    $("#upload-form").on('submit', (function(ev) {
        ev.preventDefault();
        $.ajax({
            xhr: function() {
                var progress = $('.progress'),
                    xhr = $.ajaxSettings.xhr();

                progress.show();

                xhr.upload.onprogress = function(ev) {
                    if (ev.lengthComputable) {
                        var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                        progress.val(percentComplete);
                        if (percentComplete === 100) {
                            progress.hide().val(0);
                        }
                    }
                };

                return xhr;
            },
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, status, xhr) {
                // ...
            },
            error: function(xhr, status, error) {
                // ...
            }
       });
    }));
});

Answer 5

Der einfachste und robusteste Weg, den ich in der Vergangenheit dafür verwendet habe, ist einfach ein verstecktes iFrame-Tag mit Ihrem Formular anzusprechen - dann wird es innerhalb des iFrames ohne Neuladen der Seite übermittelt.

Das gilt, wenn Sie kein Plugin, JavaScript oder andere Formen von "Magie" außer HTML verwenden möchten. Natürlich können Sie dies mit JavaScript oder etwas anderem kombinieren...

Sie können auch den Inhalt des iFrames onLoad lesen, um Serverfehler oder Erfolgsantworten zu überprüfen und diese dann dem Benutzer auszugeben.

Chrome, iFrames und onLoad

-Anmerkung- Sie müssen nur weiterlesen, wenn Sie daran interessiert sind, wie man einen UI-Blocker einrichtet, wenn Uploads/Downloads durchgeführt werden

Aktuell löst Chrome das onLoad-Ereignis für das iFrame nicht aus, wenn es zum Dateitransfer verwendet wird. Firefox, IE und Edge lösen alle das onload-Ereignis für Dateiübertragungen aus.

Die einzige Lösung, die ich für Chrome gefunden habe, war die Verwendung eines Cookies.

Im Grunde genommen, wenn der Upload/Download gestartet wird:

• [Clientseite] Starten Sie ein Intervall, um nach dem Vorhandensein eines Cookies zu suchen
• [Serverseite] Führen Sie alle erforderlichen Aktionen mit den Dateidaten durch
• [Serverseite] Setzen Sie das Cookie für das Clientseiten-Intervall
• [Clientseite] Das Intervall sieht das Cookie und verwendet es wie das onLoad-Ereignis. Zum Beispiel können Sie einen UI-Blocker starten und dann onLoad (oder wenn das Cookie erstellt wird) entfernen Sie den UI-Blocker.

Die Verwendung eines Cookies dafür ist unschön, aber es funktioniert.

Ich habe ein jQuery-Plugin erstellt, um dieses Problem für Chrome beim Herunterladen zu lösen, das Sie hier finden können

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

Dasselbe Grundprinzip gilt auch für das Hochladen.

Um den Downloader zu verwenden (fügen Sie das JS ein, offensichtlich)

 $('body').iDownloader({
     "onComplete" : function(){
          $('#uiBlocker').css('display', 'none'); //UI-Blocker bei Abschluss ausblenden
     }
 });

 $('somebuttion').click( function(){
      $('#uiBlocker').css('display', 'block'); //UI blockieren
      $('body').iDownloader('download', 'htttp://example.com/location/of/download');
 });

Und auf der Serverseite, kurz bevor die Dateidaten übertragen werden, erstellen Sie das Cookie

 setcookie('iDownloader', true, time() + 30, "/");

Das Plugin erkennt das Cookie und löst dann das onComplete Rückruf aus.