Frage Wie kann ich Dateien asynchron hochladen?


Ich möchte eine Datei asynchron mit jQuery hochladen. Das ist mein HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Und hier mein Jquery Code:

$(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("Data Uploaded: ");
            }
        });
    });
});

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

Aktuelle Lösung

Ich benutze die jQuery-Formular-Plugin um Dateien hochzuladen.


2606
2017-10-03 10:22


Ursprung


Antworten:


Mit HTML5 Sie können Dateiuploads mit Ajax und jQuery durchführen. Darüber hinaus können Sie Dateiprüfungen (Name, Größe und MIME-Typ) durchführen oder das Fortschrittsereignis mit dem HTML5-Fortschrittstag (oder einem Div) behandeln. Vor kurzem musste ich einen Datei-Uploader machen, den ich aber nicht verwenden wollte Blitz noch Iframes oder Plugins und nach einigen Recherchen kam ich auf die Lösung.

Der HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

Zuerst können Sie eine Validierung durchführen, wenn Sie möchten. Zum Beispiel im onChange-Ereignis der Datei:

$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024) {
        alert('max upload size is 1k')
    }

    // Also see .name, .type
});

Jetzt senden die Ajax mit dem Klick der Taste:

$(':button').on('click', function() {
    $.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',

        // Form data
        data: new FormData($('form')[0]),

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        }
    });
});

Wie Sie sehen können, wird mit HTML5 (und einigen Nachforschungen) das Hochladen von Dateien nicht nur möglich, sondern auch sehr einfach. Probieren Sie es mit Google Chrome Einige der HTML5-Komponenten der Beispiele sind nicht in jedem Browser verfügbar.


2335
2018-01-06 13:34



Es gibt verschiedene fertige Plugins für den Upload von Dateien für jQuery.

Diese Art des Hochladens von Hacks ist keine erfreuliche Erfahrung, daher nutzen die Leute gerne vorgefertigte Lösungen.

Hier sind einige:

Sie können nach mehr Projekten auf NPM (mit "jquery-plugin" als Schlüsselwort) oder auf Github suchen.


334
2017-10-15 10:35



2017 Update: Es hängt immer noch von den Browsern ab Ihre demografische Verwendung.

Eine wichtige Sache, um mit dem "neuen" HTML5 zu verstehen file API ist das wurde erst ab IE 10 unterstützt. Wenn der spezifische Markt, auf den Sie abzielen, eine höhere als die durchschnittliche Präferenz für ältere Windows-Versionen aufweist, haben Sie möglicherweise keinen Zugriff darauf.

Im Jahr 2017 werden etwa 5% der Browser zu IE 6, 7, 8 oder 9 gehören. Wenn Sie in ein großes Unternehmen einsteigen (z. B. ein B2B-Tool oder etwas, das Sie für Schulungen bereitstellen), kann diese Zahl steigen. Vor ein paar Monaten - im Jahr 2016 - habe ich mich mit einem Unternehmen beschäftigt, das IE8 auf über 60% seiner Maschinen einsetzt.

Also bevor du etwas tust: überprüfen Sie, welcher Browser Ihre Benutzer verwenden. Wenn Sie dies nicht tun, werden Sie eine schnelle und schmerzhafte Lektion darüber lernen, warum "Arbeit für mich" nicht gut genug ist, um einem Kunden zu liefern.

Meine Antwort von 2008 folgt.


Es gibt jedoch praktikable Nicht-JS-Methoden zum Hochladen von Dateien. Sie können einen Iframe auf der Seite erstellen (den Sie mit CSS ausblenden) und dann Ihr Formular so ausrichten, dass es an diesen Iframe gesendet wird. Die Hauptseite muss nicht verschoben werden.

Es ist ein "echter" Beitrag, also ist es nicht ganz interaktiv. Wenn Sie Status benötigen, benötigen Sie etwas Server-Side, um das zu verarbeiten. Dies variiert stark abhängig von Ihrem Server. ASP.NET hat schönere Mechanismen. PHP Plain schlägt fehl, aber Sie können verwenden Perl oder Apache-Modifikationen, um es zu umgehen.

Wenn Sie mehrere Datei-Uploads benötigen, empfiehlt es sich, jede Datei nacheinander zu bearbeiten (um die maximalen Datei-Upload-Limits zu umgehen). Veröffentlichen Sie das erste Formular im iframe, überwachen Sie den Fortschritt anhand des obigen und wenn es fertig ist, buchen Sie das zweite Formular in den iframe und so weiter.

Oder verwenden Sie eine Java / Flash-Lösung. Sie sind viel flexibler darin, was sie mit ihren Posts machen können ...


237
2017-10-03 10:41



Ich empfehle die Verwendung der Feines Uploader Plugin für diesen Zweck. Ihre JavaScript Code wäre:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

105
2017-11-21 16:38



Hinweis: Diese Antwort ist veraltet, es ist jetzt möglich, Dateien mit XHR hochzuladen.


Sie können keine Dateien mit hochladen XMLHttpRequest (Ajax). Sie können den Effekt mit einem iframe oder Flash simulieren. Das Ausgezeichnete jQuery-Formular-Plugin Das sendet Ihre Dateien über einen iframe, um den Effekt zu erhalten.


87
2017-10-03 10:36



Dies AJAX-Datei-Upload jQuery-Plugin lädt die Datei etwas hoch und übergibt die Antwort auf einen Rückruf, sonst nichts.

  • Es hängt nicht von spezifischem HTML ab, gib ihm einfach ein <input type="file">
  • Es erfordert nicht, dass Ihr Server auf eine bestimmte Art und Weise reagiert
  • Es spielt keine Rolle, wie viele Dateien Sie verwenden oder wo sie sich auf der Seite befinden

- 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('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

81
2017-07-29 00:34



Einpacken für zukünftige Leser.

Asynchroner Datei-Upload

Mit HTML5

Sie können Dateien hochladen mit jQuery Verwendung der $.ajax() Methode, wenn Formulardaten und das Datei-API werden unterstützt (beide HTML5-Funktionen).

Sie können auch Dateien senden ohne FormData In beiden Fällen muss die Datei-API vorhanden sein, um Dateien so zu verarbeiten, dass sie gesendet werden können XMLHttpRequest (Ajax).

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Für ein schnelles, reines JavaScript (keine jQuery) Beispiel siehe "Senden von Dateien mit einem FormData-Objekt".

Zurückfallen

Wenn HTML5 nicht unterstützt wird (Nr Datei-API) die einzige andere reine JavaScript - Lösung (Nr Blitz oder ein anderes Browser-Plugin) ist das versteckter iframe Technik, die es erlaubt, eine asynchrone Anfrage zu emulieren, ohne die XMLHttpRequest Objekt.

Es besteht darin, einen Iframe als Ziel des Formulars mit den Dateieingaben festzulegen. Wenn der Benutzer eine Anforderung sendet, werden die Dateien hochgeladen, aber die Antwort wird im Iframe angezeigt, anstatt die Hauptseite neu zu rendern. Das Ausblenden des Iframes macht den gesamten Prozess für den Benutzer transparent und emuliert eine asynchrone Anfrage.

Wenn es richtig gemacht wird, sollte es praktisch in jedem Browser funktionieren, aber es gibt einige Vorbehalte, wie man die Antwort vom Iframe erhält.

In diesem Fall bevorzugen Sie vielleicht ein Wrapper-Plugin wie Bifröst welches benutzt das Iframe-Technik bietet aber auch ein jQuery Ajax-Transport erlauben zu Dateien senden mit nur der $.ajax() Methode wie folgt:

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Plugins

Bifröst ist nur ein kleiner Wrapper, der Fallback-Unterstützung für jQuerys Ajax-Methode hinzufügt, aber viele der oben genannten Plugins mögen jQuery-Formular-Pluginoder jQuery-Datei hochladen Fügen Sie den gesamten Stack von HTML5 zu verschiedenen Fallbacks und einigen nützlichen Funktionen hinzu, um den Prozess zu vereinfachen. Abhängig von Ihren Bedürfnissen und Anforderungen sollten Sie eine einfache Implementierung oder eines dieser Plugins in Betracht ziehen.


75
2017-08-25 14:17



Ich habe das folgende Skript verwendet, um Bilder hochzuladen, die gut funktionieren.

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

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('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

Erläuterung

Ich benutze Antwort div um die hochgeladene 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 erwähnt extra-data wie im Skript.

Auf der PHP-Ebene funktioniert das als normaler Datei-Upload. Extra-Daten können als abgerufen werden $_POST Daten.

Hier verwendest du kein Plugin und sowas. Sie können den Code ändern, wie Sie möchten. Sie codieren hier nicht blind. Dies ist die Kernfunktionalität eines jQuery-Datei-Uploads. Eigentlich Javascript.


57
2018-01-25 11:03



Ich bin auf einige wirklich mächtige jQuery-basierte Datei-Upload-Bibliotheken gestoßen. Guck dir diese an:

  1. Plupload
  2. jQuery-Datei hochladen
  3. FineUploader

55
2018-04-08 16:43