Dynamisk fillasting med jQuery. Ajax og PHP Laster opp et bilde til serveren

Legg igjen en kommentar 6,950

Nettsteder blir mer og mer interaktive i disse dager. Dette gjelder ikke bare spesialiserte tjenester, men også vanlige nettbutikker, blogger og små sider. Hovedfunksjonen er asynkron JavaScript og XML forkortet AJAX. Denne teknologien gjør at nettleseren kan kommunisere med webserveren i bakgrunnen, og når dataene oppdateres, lastes ikke nettsiden helt inn på nytt. Vi kan med andre ord komme med forespørsler og motta svar fra serveren uten å laste inn siden på nytt i nettleseren.

Siden det mest populære språket for å utvikle webapplikasjoner er PHP, så i dag skal vi bruke lenken AJAX og PHP. Et eksempel vil være bra for å forstå de grunnleggende prinsippene for å jobbe med AJAX og PHP.

Faktisk burde det ikke være noen spesielle vanskeligheter, handlingsalgoritmen:

Velg bilde
Klikk på "Send"-knappen
Avskjær skjemaanrop med JavaScript (jQuery)
Send innhold til spesiell php-skriptbehandler
Returner utførelsesresultat
Behandle resultat med JavaScript (jQuery)
Vis nedlastingsinformasjon til brukeren

Kort om jQuery og AJAX

La meg gå litt bort og forklare hva det er. jQuery. jQuery er spesiell JavaScript et bibliotek som hjelper til med å forenkle utviklingen av nettapplikasjoner flere ganger, dette biblioteket gir også en API for å jobbe med AJAX. Med enkle ord vil vi skrive mindre kode enn om vi gjorde det i ren JS.

Ajax lar deg utveksle data med webserveren og oppdatere innholdet uten å laste inn nettsiden på nytt.

Jeg har en tendens til å tenke at hvis det finnes et verktøy som lar deg fremskynde utviklingen uten konsekvenser, hvorfor ikke bruke det? Men ren JS ville også vært greit å vite (selv om mitt nivå av JS-kompetanse personlig er lik nivået på kopier-lim-eksempler fra stackoverflow 🙂).

Vi skal se på et av problemene jeg en gang måtte løse, nemlig å laste opp et bilde til et nettsted med en forhåndsvisning. Hvis du har endret profilbildet ditt på VKontakte, forstår du hva jeg skriver om.

Vi trenger 3 enkle filer, disse er:

Skjemaside
php-behandler
js filen

index.html

Last opp Ajax

Opplasting av bilde

Vanlig html-side med et skjema. Vær oppmerksom på enctype="multipart/form-data" , dette er nødvendig for filoverføring, parameteren indikerer hvordan dataene er kodet. Hvis du laster opp filer, bør verdien alltid være multipart/form-data .

handler.php

// Sjekk om filmatrisen og matrisen med de beståtte dataene er satt if(isset($_FILES) && isset($_FILES["bilde"))) ( // Lagre den beståtte matrisen i variabelen $image = $_FILES ["image"]; // Sjekk filstørrelsen og om den overskrider den angitte størrelsen // gå ut av skriptet og skriv ut en feilmelding hvis ($image["size"] > 200000) ( die("error"); ) / / Få bildeformatet $imageFormat = explode( ".", $image["name"]); $imageFormat = $imageFormat; // Generer et nytt navn for bildet. Du kan lagre med det gamle // men dette er ikke anbefalt $imageFullName = "./images/" . hash ("crc32",time()) . "." . $imageFormat; // Lagre bildetypen i en variabel $imageType = $image["type"]; // Sjekk tilgjengelige bildeformater, hvis bildet samsvarer, // kopier bildet til bildemappen if ($imageType == "image/jpeg" || $imageType == "image/png") ( if (move_uploaded_file($ image["tmp_name"],$imageFullName)) ( ekko "suksess"; ) annet ( ekko "feil"; ) ) )

Dette er en veldig forenklet håndtering. Jeg genererte bildenavnet ved å bruke hash-funksjonen. Det er god praksis å endre navn på filer når du laster dem opp til serveren.

ajaxupload.js

$(document).ready(function () ( function readImage (input) ( if (input.files && input.files) ( var reader = new FileReader(); reader.onload = funksjon (e) ( $("#preview ").attr("src", e.target.result); ) reader.readAsDataURL(input.files); ) ) funksjon printMessage(destination, msg) ( $(destination).removeClass(); if (msg == "success") ( $(destination).addClass("alert alert-success").text("Filen ble lastet opp."); ) if (msg == "feil") ( $(destination).addClass("alert alert-danger").text("Det oppsto en feil under opplasting av filen."); ) ) $("#image").change(function()( readImage(this); )); $("#upload- image" ).on("submit",(function(e) ( e.preventDefault(); var formData = new FormData(this); $.ajax((type:"POST", // Request type url: "handler .php ", // Handler script data: formData, // Dataene vi sender cache: false, // Deaktivert som standard i POST-forespørsler, men vær sikker contentType: false, // Vi setter datakodingstypen i skjemaet, dette vil bli deaktivert pr ocessData: false, // Deaktiver fordi vi sender filen success:function(data)( printMessage("#result", data); ), error:function(data)( console. log(data); ) )); ))); ));

Det mest interessante skjer i dette manuset. Ved å bruke readImage()-funksjonen vil vi lese filen fra skjemafeltet og sende den til forhåndsvisningsblokken. Et FileReader-objekt opprettes. Den lar en nettapplikasjon lese innholdet i en fil på brukerens datamaskin. .onload-hendelsen utløses når innholdet er lest, med denne hendelsen vil vi vise bildet i forhåndsvisningsblokken.
Og til slutt starter .readAsDataURL ()-metoden prosessen med å lese filen, når lesingen er fullført, vil .onload-hendelsen bli utført og bildet vises på skjermen.

PrintMessage-funksjonen er utformet for å skrive ut informasjon om vellykket eller mislykket filopplasting. Vi vurderer ikke i detalj, det representerer ikke noe spesielt.

Avskjæring av skjemaet og dets behandling. Når du klikker på "Send"-knappen, vil hendelsen bli fanget opp av skriptet, og ved å bruke .preventDefault()-funksjonen vil ikke skjemaet sende data til index.html . .preventDefault() brukes til å forhindre at hendelser kalles opp.

Vi trenger FormData-objektet for å lage en POST-forespørsel til skriptet vårt, noe som er mye enklere enn å skrive hvert skjemaelement inn i en streng. Vi opprettet et objekt, fylte det med data og sendte det til ajaxen vår.

Vel, faktisk selve forespørselen AJAX. Siden vi bruker biblioteket jQuery, vil kompilering og utførelse av en slik forespørsel ikke føre til noen problemer.

Det er faktisk her vi slutter. Bildet lastes inn, siden lastes ikke inn på nytt, alle er fornøyde. Hvis du har spørsmål eller forslag, skriv kommentarer.

Ha en fin dag og suksess 🙂

Hvordan laste opp filer, for eksempel bilder til serveren ved hjelp av AJAX og jQuery? Dette gjøres ganske enkelt! Og nedenfor vil vi analysere alt i detalj.

I de "gamle" tider, da det ikke fantes jQuery ennå, eller kanskje det var det, men nettlesere var ikke så fancy, var det et ork å laste opp en fil til et nettsted ved å bruke AJAX: gjennom alle slags krykker som en iframe. Jeg fant ikke de tidene, og hvem bryr seg nå. Og nå er noe annet interessant - at det er veldig enkelt å lagre filer på nettstedet. Selv de som ikke har erfaring og forståelse for hvordan AJAX fungerer, vil en webmaster raskt kunne finne ut hva de skal gjøre. Og denne artikkelen vil hjelpe ham. Hvis du sikkerhetskopierer disse funksjonene med WordPress-funksjoner, blir sikker behandling og opplasting av filer til serveren helt ubetydelig og til og med interessant (se WordPress-eksemplet på slutten av artikkelen).

Uansett hvor enkelt det er, bør det bemerkes at et minimumserfaring med filer og grunnleggende kunnskaper i Javascript, jQuery og PHP fortsatt kreves! Som et minimum må du forstå hvordan filer lastes opp til serveren, hvordan AJAX fungerer i generelle termer, og i det minste litt må du kunne lese og forstå koden.

Metoden beskrevet nedenfor er ganske stabil, og er i hovedsak avhengig av Javascript nye FormData()-objektet, som alle nettlesere har grunnleggende støtte for.

For en bedre forståelse av materialet er det delt inn i trinn. Det var alt, fløy ...

AJAX-filopplasting: Generelt eksempel

Det hele starter med tilstedeværelsen av et inndatafelt av typen fil på nettstedet. Det er ikke nødvendig at dette feltet er en del av skjemaet (tag

Så vi har en HTML-kode med et filfelt og en Last opp filer-knapp.

laste ned filer

Trinn 1. Data fra filfeltet

Det første trinnet er å få dataene til de opplastede filene.

Når du klikker på filfeltet, vises et filvalgsvindu, etter valg lagres data om dem i inndatafeltet, og vi må "hente det" derfra. For å gjøre dette, vil vi legge ved en funksjon til endrings-JS-hendelsen som vil lagre eksisterende data i filfeltet i JS-variabelfilene:

var filer; // variabel. vil inneholde fildata // fyll variabelen med data når verdien av filfeltet endres $("input").on("change", function()( files = this.files; ));

Trinn 2. Opprett en AJAX-forespørsel (ved klikk)

Vi har fildataene, nå må vi sende dem via AJAX. Vi henger denne hendelsen med et klikk på "Last opp filer"-knappen.

På tidspunktet for klikket oppretter vi et nytt objekt new formData() og legger til dataene fra filvariabelen til det. Med formData() vil vi sørge for at innsendte data vil se ut hvis vi nettopp sendte inn skjemaet i nettleseren.

For at en slik forespørsel skal finne sted, må ytterligere AJAX-parametere spesifiseres i jQuery, så den vanlige $.post()-funksjonen er ikke egnet og vi bruker en mer fleksibel analog: $.ajax() .

To viktige tilleggsalternativer må settes til usann:

ProcessData Deaktiverer behandling av overførte data. Som standard, for eksempel for GET-forespørsler, samler jQuery inn dataene til en spørringsstreng og legger til den strengen på slutten av URL-en. For POST-data utfører den andre transformasjoner. Eventuelle endringer i kildedataene vil forstyrre oss, så deaktiver dette alternativet... contentType Deaktiverer innstillingen av forespørselstypeoverskriften. Standard jQuery-innstillingen er "application/x-www-form-urlencoded . Denne overskriften tillater ikke innsending av filer. Hvis du setter dette alternativet til "multipart/form-data" , vil PHP fortsatt ikke kunne gjenkjenne de innsendte dataene og vil vise advarselen "Manglende grense i multipart/form-data"... Generelt er den enkleste måten å deaktivere dette alternativet, da fungerer alt! // behandler og sender en AJAX-forespørsel når du klikker på upload_files-knappen $( ".upload_files").on("klikk", function( event)( event.stopPropagation(); // stopp alle gjeldende JS-hendelser event.preventDefault(); // stopp standardhendelsen for gjeldende element - klikk for tag // gjør ingenting hvis filene er tomme if(typeof files == "undefined") return; // opprett et skjemadataobjekt var data = new FormData(); // fyll ut dataobjektet med filer i et passende format for å sende $.each(filer, funksjon(nøkkel, verdi)( data.append(nøkkel, verdi); )); // legg til en variabel for å identifisere forespørselen data.append("my_file_upload", 1); // AJAX request $.ajax(( url: "./submit.php", type: "POST", // viktig! data: data, cache: false, dataType: "json", // deaktiver behandling av innsendte data , la den sendes som den er processData: false, // deaktiver innstilling av forespørselstypeoverskriften slik at jQuery vil fortelle serveren at dette er en strengforespørsel contentType: false, // server respons suksess funksjon suksess: function(respond, status, jqXHR )( // OK - filer lastet inn if(typeof respond.error === "undefined")( // vis banene til de opplastede filene i ".ajax-reply"-blokken var files_path = respond.files; var html = ""; $.each(files_path, function( key, val)( html += val +"
"; )) $(".ajax-reply").html(html); ) // feil else ( console.log("FEIL: " + respond.error); ) ), // serverresponsfeil funksjonsfeil: function(jqXHR, status, errorThrown)( console. log("FEIL AJAX-forespørsel: " + status, jqXHR); ) )); ));

Trinn 3. Behandling av forespørselen: opplasting av filer til serveren

Nå er det siste trinnet: vi må behandle den innsendte forespørselen.

For å visuelt behandle forespørselen uten ytterligere kontroller for filer, dvs. bare lagre de mottatte filene i ønsket mappe. Selv om sendte filer må kontrolleres for sikkerhets skyld, i det minste filtypen (typen) ...

La oss lage en submit.php-fil med følgende kode (det antas at submit.php er i samme mappe som filen som AJAX-forespørselen sendes fra):

$done_files) : array("error" => "Feil under opplasting av filer."); die(json_encode($data)); )

Det er alt!

Viktig! Denne koden viser bare hvordan du henter og lagrer filer. Faktisk må du sjekke formatene til de mottatte filene, deres størrelse, translitterere de kyrilliske navnene og muligens gjøre noen andre kontroller.

For ikke å samle nedlastingskoden ovenfor i deler, foreslår jeg at du laster den ned.

Kopier innholdet i arkivet til php-serveren din, gå til hovedpakken (i en nettleser) og prøv å laste opp filene. Så du vil se "live" hva og hvordan det fungerer.

AJAX-filopplasting: WordPress-eksempel

For WordPress er det mye enklere å håndtere en AJAX-forespørsel fordi det finnes ferdige funksjoner som media_handle_upload() .

Det første og andre trinnet er like, og i det tredje trinnet vil vi bruke den innebygde funksjonen som vil legge filen til mediebiblioteket og koble den til det aktuelle innlegget.

For at koden nedenfor skal begynne å fungere, må den legges til temaets functions.php-fil. Deretter oppretter du en side med etiketten ajax_file_upload og går til denne siden. I innholdet vil du se et skjema for å legge til en fil. Velg filer og sjekk om alt er lastet inn...

Dette er et komplett eksempel på hvordan du trygt kan laste opp filer til en server i et WordPress-miljø.

post_name !== "ajax_file_upload") returner $text; returner $text .= "

"; ) // JS-kodefunksjon ajax_file_upload_jscode()( ?> $max_size || $sizedata/*height*/ > $max_size) wp_send_json_error(__("Bildet kan ikke være større enn ". $max_size ."px i bredden eller høyden...","km")); // håndtere filopplasting require_once ABSPATH . "wp-admin/includes/image.php"; require_once ABSPATH . "wp-admin/includes/file.php"; require_once ABSPATH . "wp-admin/includes/media.php"; // filter for tillatte filtyper - tillat kun bilder add_filter("upload_mimes", function($mimes)( return [ "jpg|jpeg|jpe" => "image/jpeg", "gif" => "image/gif" , "png" => "bilde/png", ]; )); $uploaded_imgs = array(); foreach($_FILES as $file_id => $data)( $attach_id = media_handle_upload($file_id, $post_id); // error if(is_wp_error($attach_id)) $uploaded_imgs = "Feil ved opplasting av fil `". $data[" name"] ."`: ". $attach_id->get_error_message(); else $uploaded_imgs = wp_get_attachment_url($attach_id); ) wp_send_json_success($uploaded_imgs); )

Sannsynligvis har mange kommet over spørsmålet "Hvordan laste opp en fil til serveren ved hjelp av JS og JQuery?".
Og det var nok ikke alle som klarte det. Faktisk er ikke alt så vanskelig som det ser ut til.
I denne leksjonen vil jeg beskrive prosessen med å laste opp en fil til en server (hosting).
Ajax-teknologi brukes til å utveksle data mellom nettleseren og webserveren.
Versjon av jQuery brukt i oppskriften: 2.2.2.

Vi lager primitiv markup fra html, head og body tags.
I head-taggen må du skrive banen til jquery-biblioteket.
I eksemplet bruker jeg jquery fra google server.

I body-taggen lager vi et skjema som består av en input-tag og en knapp.
Input type="file" velger en fil som skal lastes opp.
Knappekoden kreves for å kjøre js-koden for å overføre filen.

Angi skjemaet name="uploader", enctype="multipart/form-data", method="POST".
Skjemanavn: name="uploader"
Slik koder du skjemadata: enctype="multipart/form-data"
Dataoverføringsmetode: method="POST"

Send inn denne filen:

All html- og js-kodekode:

La oss gå videre til java-skriptkoden.
For å sende inn en fil, må du sende inn hele skjemaet:
$("form").submit(function(e) (

Vi leser skjemadataene inn i en variabel:
var formData = new FormData($(this));

Deretter bruker vi ajax-teknologien for å overføre data til webserveren.
Hvis filoverføringen var vellykket, vil en melding vises i et popup-vindu.
Hvis det oppstår en feil eller filen mangler, vises en melding med teksten til problemet.
$.ajax(( url: "fil.php", type: "POST", data: formData, async: usant, suksess: funksjon (msg) ( alert(msg); ), error: function(msg) ( alert( "Feil!"); ), cache: false, contentType: false, processData: false ));

All java-skriptkode ved hjelp av jquery:

Nå er det en kode på serversiden for å motta data fra skjemaet ved å bruke POST-forespørselsmetoden.

Vi får rotkatalogen til nettstedet og tildeler en mappe for opplasting av filer:
$uploaddir = $_SERVER["DOCUMENT_ROOT"].DIRECTORY_SEPARATOR."opplastinger".DIRECTORY_SEPARATOR;

Leser den opplastede filen:
$uploadfile = $uploaddir . basename($_FILES["brukerfil"]["navn"]);

Sjekk om filen er lastet inn.
I samsvar med innkommende data tildeler vi en medfølgende melding.
Hvis filen ikke er lastet opp, last opp til katalogen spesifisert i $uploadfile:
if (move_uploaded_file($_FILES["userfile"]["tmp_name"], $uploadfile)) ( $out = "Filen er gyldig og lastet opp.\n"; ) else ( $out = "Mulig filopplastingsangrep !\ n";)

Når de angitte handlingene er utført, returneres et svar.

All kode i php:

All html-kode inkludert js:

Last ned fil med kildekode:

Nylig ble jeg spurt hvordan laste filer dynamisk med jQuery. Egentlig var dette spørsmålet allerede stilt til meg i lang tid, men da det ikke var noe avsnitt om jQuery, var det ekstremt problematisk å skrive denne artikkelen. Men nå er det ingenting som hindrer meg i å snakke om hvordan laste opp filer dynamisk til serveren.

Der er alt veldig godt skrevet på nettstedet, pluss at selve plugin-en er ganske enkel, men jeg vil fortsatt forklare alt med et eksempel. For å starte, her er en enkel kode HTML-sider:

Filopplasting

Stilfilen er standard for denne plugin-en, og den lastes også ned i det generelle settet med filer fra det offisielle nettstedet. Selvfølgelig kan du endre det til din smak.

Det kobles også sammen jQuery og selve plugin-en. Deretter opprettes et skjema, og skriv inn med type="file" sette id, som deretter vil bli brukt i skriptet.

I selve scriptet sendes data til formData. Nemlig gjeldende tid og hemmelig token. I stedet for " unikt_salt" kan være hvilken som helst hemmelig streng. I " opplaster" et behandlerskript sendes. Nå er koden til denne behandleren selv:

$targetFolder = "/opplastinger"; // Hvor skal du laste opp filer
$verifyToken = md5("unique_salt" . $_POST["tidsstempel"]); // Lag et token som ligner på det du får fra JavaScript
if (!empty($_FILES) && $_POST["token"] == $verifyToken) ( // Hvis tokenene samsvarer, kan du laste opp filer
/* Opprett full bane for å laste opp fil */
$tempFile = $_FILES["Fildata"]["tmp_name"];
$targetPath = $_SERVER["DOCUMENT_ROOT"] . $targetFolder;
$targetFile = rtrim($targetPath,"/") . "/" . $_FILES["Fildata"]["navn"];
$filTypes = array("jpg","jpeg","gif","png"); // Tillatte utvidelser
$fileParts = pathinfo($_FILES["Fildata"]["navn"]); // Få utvidelsen til den opplastede filen
if (in_array($fileParts["utvidelse"],$filtyper)) (
move_uploaded_file($tempFile,$targetFile); // Hvis utvidelsen av den opplastede filen er tillatt, last opp filen
ekko "1";
) else echo "Ugyldig filtype."; // Skriv ut en feil
}
?>

Jeg kommenterte koden, så jeg tror at det ikke vil være vanskelig å finne ut av det. Det eneste jeg legger merke til er at det ikke er nok kontroller her. Jeg skrev imidlertid om det i en egen artikkel.

fremdriftsindikator denne plugin er også innebygd, så alt er allerede gjort for oss. Dette er fordelen med biblioteket. jQuery og plugins for det. Svært komplekse oppgaver som dynamisk opplasting av filer til en server med fremdriftsindikator, som vil kreve en hel dag for utvikling, og deretter noen dager til for å fikse feil, løses på noen få minutter ved hjelp av ferdige plugins.