Wij schrijven de code voor het laden van een afbeelding via ajax. Een bestand uploaden naar de server met behulp van JavaScript en JQuery-bibliotheek

Tegenwoordig worden websites steeds interactiever. Dit geldt niet alleen gespecialiseerde diensten, maar ook regulier internetten winkels, blogs en kleine websites. Het belangrijkste kenmerk is asynchrone JavaScript en XML wordt afgekort als AJAX. Deze technologie maakt het voor de browser mogelijk achtergrond communiceren met de webserver en bij het bijwerken van gegevens wordt de webpagina niet volledig opnieuw geladen. Met andere woorden: we kunnen verzoeken indienen en antwoorden ontvangen van de server zonder de pagina in de browser opnieuw te laden.

Sinds de meeste populaire taal om webapplicaties te ontwikkelen is PHP, dan zullen we vandaag een combinatie van AJAX en PHP gebruiken. Het voorbeeld zal goed zijn om de basisprincipes van het werken met AJAX en PHP te begrijpen.

In feite zouden er geen speciale problemen moeten zijn, het algoritme van acties is:

  • Selecteer afbeelding
  • Klik op de knop "Verzenden".
  • Onderschep een formulieroproep met met behulp van JavaScript(jQuery)
  • Stuur inhoud naar speciale php script-handler
  • Uitvoeringsresultaat retourneren
  • Verwerk het resultaat met JavaScript (jQuery)
  • Geef downloadinformatie weer aan de gebruiker
Kort over jQuery en AJAX

Ik zal een beetje afwijken van het onderwerp en uitleggen wat jQuery is. jQuery is een speciale JavaScript-bibliotheek die de ontwikkeling van webapplicaties meerdere keren helpt vereenvoudigen deze bibliotheek biedt een API voor het werken met AJAX. In eenvoudige woorden, zullen we minder code schrijven dan wanneer we het in pure JS zouden doen.

Met Ajax kunt u gegevens uitwisselen met de webserver en de inhoud ervan bijwerken zonder de webpagina opnieuw te laden.

Ik ben geneigd te denken dat als er een tool bestaat waarmee je de ontwikkeling kunt versnellen zonder gevolgen, waarom zou je die dan niet gebruiken? Maar het zou ook geen kwaad om pure JS te kennen (hoewel mijn persoonlijke niveau van JS-vaardigheid gelijk is aan het niveau van copy-paste-voorbeelden van StackOverflow :)).

We zullen kijken naar een van de problemen die ik ooit moest oplossen, namelijk het laden van een afbeelding op een site met een voorbeeld. Als je je avatar op VKontakte hebt gewijzigd, begrijp je waar ik over schrijf.

Wij hebben er 3 nodig eenvoudig bestand, Dit:

  • Formulierpagina
  • php-handler
  • js-bestand
index.html Ajax Upload Afbeelding geüpload Afbeeldingsbestand:

Normaal html-pagina met vorm. Let op enctype="multipart/form-data" , dit is nodig voor het overbrengen van bestanden; de parameter geeft de methode van gegevenscodering aan. Als u bestanden overdraagt, moet de waarde altijd multipart/form-data zijn.

handler.php // Controleer of de array met bestanden en de array met de overgedragen gegevens zijn geïnstalleerd if(isset($_FILES) && isset($_FILES["image"])) ( //Sla de overgedragen array op in de variabele $ image = $_FILES["image "]; // Controleer de bestandsgrootte en of deze groter is gegeven maat// voltooi de uitvoering van het script en geef een foutmelding weer als ($image["size"] > 200000) ( die("error"); ) // Haal het afbeeldingsformaat op $imageFormat = explode(".", $image["name "]); $imageFormat = $imageFormat;// Genereer een nieuwe naam voor de afbeelding. Je kunt opslaan met de oude // maar het wordt niet aanbevolen $imageFullName = "./images/" . hash("crc32",tijd()) . "." . $imageFormat; // Bewaar het afbeeldingstype in een variabele $imageType = $image["type"];// Rekening

beschikbare formaten

ajaxupload.js $(document).ready(function () ( functie readImage (input) ( if (input.files && input.files) ( var reader = new FileReader(); reader.onload = function (e) ( $( "#preview").attr("src", e.target.result); reader.readAsDataURL(input.files); functie printMessage(destination, msg) ( $(destination).removeClass(); if ( msg == "success") ( $(destination).addClass("alert alert-success").text("Bestand succesvol geüpload."); ) if (msg == "fout") ($(destination).addClass ("alert alert-danger").text("Er is een fout opgetreden tijdens het uploaden van het bestand." ) ) $("#image").change(function())( readImage(this); )); -image").on( "submit",(function(e) ( e.preventDefault(); var formData = new FormData(this); $.ajax(( type:"POST", // Request type url: " handler.php", // Handlerscriptgegevens: formData, // De gegevens die we doorgeven cache: false, // In POST-verzoeken is dit standaard uitgeschakeld, maar laten we op veilig spelen contentType: false, // We stellen het gegevenscoderingstype in het formulier in, dat zullen we doen schakel dit proces uitData: false, // Schakel uit omdat we het bestand doorgeven success:function(data)( printMessage("#result", data);

), fout:function(data)( console.log(data); ) )); ))); )); Het meest interessante gebeurt in dit script. Met behulp van de functie readImage() lezen we het bestand uit het formulierveld en geven het door aan het blok voor
voorbeeld

. Er wordt een FileReader-object gemaakt. Hiermee kan een webapplicatie de inhoud van een bestand op de computer van de gebruiker lezen. De .onload-gebeurtenis wordt geactiveerd wanneer de inhoud wordt gelezen. Met behulp van deze gebeurtenis zullen we de afbeelding in het voorbeeldblok weergeven.

En ten slotte start de .readAsDataURL() -methode het proces van het lezen van het bestand. Na voltooiing van het lezen wordt de .onload-gebeurtenis uitgevoerd en verschijnt de afbeelding op uw scherm.

De printMessage-functie is ontworpen om informatie weer te geven over een succesvolle of mislukte poging om een ​​bestand te downloaden. We bekijken het niet in detail; het vertegenwoordigt niets bijzonders. Onderschepping van het formulier en de verwerking ervan. Wanneer u op de knop “Verzenden” klikt, wordt de gebeurtenis door het script onderschept en met behulp van de functie .preventDefault() verzendt het formulier geen gegevens naar index.html . .preventDefault() wordt gebruikt om te voorkomen dat er gebeurtenissen worden gegenereerd. We hebben het FormData-object nodig

Nou ja, eigenlijk het AJAX-verzoek zelf. Omdat we de jQuery-bibliotheek gebruiken, zal het maken en uitvoeren van een dergelijke query geen problemen opleveren.

Eigenlijk, laten we hier eindigen. De afbeelding wordt geladen, de pagina wordt niet opnieuw geladen, iedereen is blij. Als u vragen of suggesties heeft, kunt u opmerkingen schrijven.

Fijne dag en succes :)

We hebben enkele 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 - we verwijderen het standaard gegevensopmaakprocesData: false, // important - we verwijderen de standaard tekenreeksconversiegegevens: formData, dataType: "json", success: function(json)( if(json)( $that.replaceWith(json);

(*)Houd er rekening mee dat wij het formulier niet indienen jQuery-object en het DOM-element

PHP-handler ( bestandshandler.php)

Alle html-code inclusief js:

Dien dit bestand in: Upload $("form").submit(function(e) ( var formData = new FormData($(this)); $.ajax(( url: "file.php", type: "POST", data: formData, async: false, success: function (msg) ( alert(msg); ), error: function(msg) ( alert("Error!"); ), cache: false, contentType: false, processData: false )); e.voorkomenDefault();

Broncodebestand downloaden:

Het uploaden van bestanden of afbeeldingen naar een server is een vrij typische taak. Maar de vooruitgang staat niet stil en daarom wil ik nu natuurlijk dat bestanden op de achtergrond worden gedownload. In de regel kon dit voorheen worden geïmplementeerd met behulp van flash-technologieën of iframe. Ook gebruiken veel mensen plug-ins zoals jQuery Form Plugin of Ajax File Upload Plugin of Multiple File Upload Plugin en een zee van anderen. Met de komst van het FormData-object is alles veel eenvoudiger geworden. Met FormData() kunt u een set gegevens samenstellen die u met XMLHttpRequest naar de server kunt verzenden.

Laten we proberen onze eigen code te schrijven zonder plug-ins (nou ja, behalve het jQuery-framework natuurlijk) om afbeeldingen of bestanden op de achtergrond naar de server te uploaden. Over het algemeen zal het algoritme van onze acties ongeveer als volgt zijn: vul de formuliervelden met gegevens. De velden kunnen van alles zijn: tekst, tekstgebied, selectie en bestanden. Wanneer u bestanden selecteert, worden deze bestanden dankzij onze jQuery-code op de achtergrond gedownload naar een tijdelijke map op de server, bijvoorbeeld “tmp”. Vervolgens wanneer u op de knop drukt formulieren indienen, worden de gegevens naar een serverscript verzonden dat de gegevens verwerkt. Laten we ons voorstellen dat dit artikelen zijn. Wij slaan de verzonden gegevens op in een database met een uniek ID. Vervolgens zullen we een map aanmaken in de map “images” met een uniek nummer “id” en als we bestanden in de map “tmp” hadden, kopiëren we deze naar de gemaakte map “id” en wissen vervolgens de map “tmp map. Samenvattend: we vullen de afbeeldingen in tmp als achtergrond, bij het indienen van het formulier schrijven we de gegevens naar de database, we zullen uniek nummer records. We maken een map met dit nummer en verplaatsen onze bestanden daarheen. Alle. In dit artikel gaan we niet in op het uploaden naar de database en het kopiëren van bestanden. Ik denk dat er hier voor ieder wat wils zal zijn. We zullen ons op één ding concentreren: asynchroon laden afbeeldingen (of bestanden).

Dus hier is ons html-stuk. Hier zullen we aandacht besteden aan het feit dat we een GIF-bestand hebben met een afbeelding van de preloader (lusvormige cirkel), die we met stijlen voor weergave verbergen. We zullen ook id = file toewijzen aan het bestandsveld, en enctype = “multipart/form-data” aan het formulier. De bestandsveldnaam zal bestand zijn, d.w.z. zodat we met de array kunnen werken, omdat we meerdere bestanden mogen uploaden (meerdere attributen).

#preloader (zichtbaarheid: verborgen;) Voeg informatie toe

In dit formulier hebben we naast het bestandsveld een aantal velden, bijvoorbeeld: input=text. Die. voor ons reguliere vorm bijvoorbeeld voor het beheerdersdashboard, een reeks velden die u nodig heeft. Om te beginnen kunt u, als u dat wilt, de werking van het script controleren door de regels te schrijven die de FILES-array aan het begin van het bestand tonen:

//upload.php print_r($_FILES);

Laten we nu ons serverscript schrijven, waaruit zal worden aangeroepen jQuery gebruiken. Het is zijn taak om de geüploade bestanden van de tijdelijke map van de server naar de onze over te brengen, bijvoorbeeld zoals we in "tmp" hebben besloten, en ze vervolgens weer te geven.

//upload.php functie show_dir($dir) // functie voor het tonen van afbeeldingen uit de tmp map ( $list = scandir($dir); unset($list,$list); foreach ($list as $file) ( echo " "; ) ) foreach ($_FILES as $key => $value) ( ​​//verplaats bestanden naar tmp move_uploaded_file($value["tmp_name"], "tmp/".$value["name"]); ) show_dir( "./tmp/");

En nu ons js-script, dat onze bestanden op de achtergrond naar de server uploadt. Alle magie wordt gedaan dankzij het FormData() object. We zullen deze code toevoegen aan het einde van onze index.php, vóór de tag.

$(document).ready(function())( $("#preloader").hide(); $("#file").bind("change", function())( var data = new FormData() ; var error = ""; jQuery.each($("#bestand").bestanden, functie(i, bestand) ( if(bestand.naam.lengte< 1) { error = error + " Файл имеет неправильный размер! "; } //Проверка на длину имени if(file.size >1000000) ( error = error + " File " + file.name + " is te groot."; ) //Bestandsgrootte controleren if(file.type != "image/png" && file.type != "image/jpg " " && !file.type != "image/gif" && file.type != "image/jpeg") ( error = error + "Bestand " + file.name + " komt niet overeen met png, jpg of gif" ) / /Bestandstypen controleren data.append("file-"+i, file);

)); if (fout != "") ($("#info").html(fout);) else ( $.ajax(( url: "upload.php", data: data, cache: false, contentType: false, processData: false, type: "POST", beforeSend: function() ( $("#preloader").show(); ), succes: function(data)( $("#info").html(data); $("#preloader").hide();
Nou, dat lijkt alles te zijn. Als iemand iets niet begrijpt, vraag het dan. Als iemand aanvullingen heeft, ben ik daar ook blij mee!

Tip: als je nog geen code hebt gebruikt om bestanden uit een map te verwijderen, raad ik aan om de rmdir-verwijderfunctie te wijzigen in echo voor een test om er zeker van te zijn dat alleen de bestanden die je wilt verwijderen, worden verwijderd. Gif-preloaders kunnen bijvoorbeeld worden overgenomen uit mijn les Hoe maak je Gif-animatie. Voorbeelden aan het einde van het artikel.

UPD: Als iemand schoonheid wil toevoegen, bijvoorbeeld een voortgangsbalk, dan moeten we hiervoor een paar regels code toevoegen. IN we zullen een superelement uit html5 toevoegen - progress, en in de js-code zullen we verschillende regels toevoegen met een XMLHttpRequest-object.
En dus wordt onze html aangevuld met het volgende:

En we zullen toevoegen aan de js-code:

Functie progressHandlingFunction(e)( if(e.lengthComputable)( $("progress").attr((waarde:e.loaded,max:e.total)); ) )

Xhr: function() ( var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload)( // controleer of de upload bezig is myXhr.upload.addEventListener("progress",progressHandlingFunction, false); //passing naar functiewaarden) retourneer myXhr;

Het eindresultaat van de js-code:

$(document).ready(function())( function progressHandlingFunction(e)( if(e.lengthComputable)( $("progress").attr((waarde:e.loaded,max:e.total)); ) ) $("#preloader").hide(); $("#file").bind("change", function())( var data = new FormData(); var error = ""; jQuery.each( $( "#bestand").files, function(i, file) ( if(bestand.naam.lengte< 1) { error = error + " Файл имеет неправильный размер! "; } if(file.size >1000000) ( fout = fout + " Bestand " + bestandsnaam + " is te groot."; ) if(bestand.type != "afbeelding/png" && bestand.type != "afbeelding/jpg" && !bestand. type != "image/gif" && file.type != "image/jpeg") ( error = error + "File " + file.name + " komt niet overeen met png, jpg of gif"; ) data.append( "bestand -"+i, bestand);



Julia