Dynamisch laden van bestanden met jQuery. Een bestand uploaden naar de server met behulp van JavaScript en JQuery-bibliotheek

We hebben verschillende basismethoden besproken voor het ophalen van gegevens en het doorgeven ervan met een AJAX-verzoek. Nu is het tijd om te praten over hoe je bestanden kunt uploaden met AJAX. Tot voor kort waren er niet zo veel manieren om bestanden te downloaden zonder de pagina zelf opnieuw te laden (verborgen iframe, Flash). Ze worden nog steeds gebruikt omdat er nog steeds gebruikers zijn met oudere versies van browsers die geen last hebben van de vooruitgang. Maar we kijken niet achterom, dus gaan we met de tijd mee.

Laten we, naar mijn mening, een van de meest bekijken handige manieren voor het werken met bestanden (en niet alleen) - het FormData-object. Laat er zo’n eenvoudig formulier zijn voor het laden van de avatar van de gebruiker:

HTML-code ( index.html-bestand)

Volledige naam:
Avatar:

Laten we verder gaan met het JS-gedeelte. Er zullen geen problemen zijn met het veld “Volledige naam” en we gebruiken het alleen om te illustreren dat we samen met het bestand andere gegevens kunnen verzenden.

jQuery ( script.js-bestand)

$(function())( $("#my_form").on("submit", function(e)( e.preventDefault(); var $that = $(this), formData = new FormData($that.get ( 0)); // maak een nieuwe objectinstantie en geef ons formulier eraan door (*) $.ajax(( url: $that.attr("action"), type: $that.attr("method"), contentType: false , // important - verwijder het standaard gegevensopmaakprocesData: false, // important - verwijder de standaard tekenreeksconversiegegevens: formData, dataType: "json", success: function(json)( if(json)( $that .replaceWith(json);

(*)Houd er rekening mee dat we het formulier niet doorgeven als een jQuery-object, maar als een DOM-element

PHP-handler ( bestandshandler.php)