Hvordan laste opp bilder ved hjelp av Ajax

Hvordan laste opp bilder ved hjelp av Ajax


Bruker AJAX for å laste opp bilder til et nettsted gjør prosessen brukervennlig, som opplastingen kan forekomme uten at leseren måtte hente en ny side. Men AJAX alene ikke kan laste opp bilder og bildeopplasting via server side kode vanligvis krever en ny side for å bli hentet. For å omgå disse problemene, kan du bruke jQuery bibliotekene sammen med iframes i sidens HTML for å laste opp bildet mens resterende på samme side.

Bruksanvisning

1 Last ned jQuery script og jQuery Multiple File Upload Plugin (se referanser for link), og plassere dem i samme katalog. Lag din nettside, linke til skript i hodet delen av HTML som følger:

<Html>

<Head>

<Script type = "text / javascript" language = "javascript" language = "javascript" verdier hvis filnavnene er forskjellige for skript versjonene du har lastet ned, da disse ofte endres. Lagre filen med ".php" forlengelse i samme katalog som skript.

2 Legg opplastingsskjemaet på websiden ved å inkludere følgende kode mellom åpning og lukking <body> tags:

<Form action = "img_load.php" method = "post" enctype = "multipart / skjema-data" target = "load_frame">

<Input type = "file" name = "img []" class = "multi" />

<Input type = "submit" name = "last opp" value = "Last opp bilde" />

</ Form>

<Iframe id = "load_frame" name = "load_frame" inn følgende kode:

<? Php

if (isset ($ _ POST [ 'upload']))

{$ Uploaddir = 'uploadedimgs /';

foreach ($ _files [ "img"] [ "feil"] som $ index => $ status)

{If ($ status == UPLOAD_ERR_OK)

{$ Temp = $ _files [ "img"] [ "tmp_name"] [$ index];

$ File_ref = $ _files [ "img"] [ "navn"] [$ index];

$ File_location = $ uploaddir. basename ($ file_ref);

if (move_uploaded_file ($ temp, $ file_location))

{Echo "<p> file (".. $ File_ref ") ble lastet opp </ p>"; }

ellers

"(.. $ File_ref") {echo! <P> Oops din fil "ble ikke lastet opp </ p>."; }}}}

?>

Selv finnes i en egen fil, vil denne koden kjøres inne hovedsiden iframe, slik den er oppført som kilde og er spesifisert som mål for innsending av opplastingsskjemaet.

4 Opprett en ny katalog i samme katalog som skriptene og gi den navnet "uploadedimgs", som det er her alle opplastede bildene vil bli plassert. Last opp din nettside, PHP laste script, både Javascript-filer (jQuery og Last opp Plugin) og den nye "uploadedimgs" katalogen til webserveren. Pass på at alle filene forbli i samme relative posisjoner slik at kode referanser vil fungere korrekt.

5 Finn frem til din nettside og teste opplasting funksjonalitet. Sjekk at opplysningene i iframe delen av siden oppdateres riktig på å sende inn skjemaet, som det skal utgang en av de inkluderte meldinger om hvorvidt opplasting var vellykket eller ikke. Sjekk også at bildene er lastet opp ved å lage en forbindelse til serveren din og sjekke innholdet i "uploadedimgs" katalogen.

Hint

  • Du kan skjule iframes i sidene ved å sette synlighet til "skjult" i CSS-koden.
  • Bruke iframes kan være uforutsigbare, så sørg for at du teste dine sider i ulike nettlesere.