30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. Web Development
Code

Pag-upload ng mga Files gamit ang AJAX

by
Difficulty:IntermediateLength:LongLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Mukhang hindi ko maabot ang dulo ng nakakaaliw na mga bagay na maaaring mong gawin gamit ang umuusbong na mga teknolohiya sa web. Ngayon, ipapakita ko sa iyo paano gumawa ng ilang bagay – na hanggang sa huling sandali -  ay hindi pa halos nagagawa: ang pag-upload ng mga files sa pamamagitan ng AJAX.

O, siguro, may mga hacks; pero kung ika’y katulad ko, at nakakaramdam na marumi sa bawat oras na ika’y nagta-type ng iframe, iyong magugustuhan ito ng marami. Samahan mo ako pagkatapos ng talon!

Naghahanap ng isang Mabilisang Solusyon?

Kung ika’y naghahanap ng isang mabilisang solusyon, may isang kahanga hanga na koleksyon nga mga file upload script at mga application dito sa Envato Market.

Ang HTML5 na file uploader na ito ay kapaki pakinabang – maaari mong madagdag ng madali ang mga file sa pamamagitan ng pag-drag at pag-drop o pag-click sa mga ito. Ang lahat ng mga file ay naa-upload sa pamamagitan ng AJAX o maaaring idagdag sa loob ng isang form, at ang mga file ay maaaring palitan ang pangalan bago ito i-upload. Isang kahanga – hanga, mabilis na solusyon kung ito ang iyong hinahanap!


Bakit hindi natin unahin ang masamang balita?

Hindi ito gumagana sa lahat ng browser. Gayunpaman, kasama ang iilang progresibong mga karagdagan (o alinmang bagong tsismis), magkakaroon kami ng isang upload page na gagana hanggang pabalik sa IE6 (kahit na wala ang mga piraso ng AJAX).

Ang aming AJAX na upload ay gagana kung mayroong FormData; kung wala, ang gagamit ay magkakaroon lamang ng normal na upload.

May tatlong pangunahing mga bahagi sa aming proyekto.

  • Ang multiple attribute sa file input element.
  • Ang FileReader object na galing sa isang bagong File API.
  • Ang FormData object na galing sa XMLHttpRequest2.

Ginagamit namin ang multiple na attribute para pahintulutan ang gumagamit na makapili ng maraming mga file para i-upload (ang maraming file na upload ay normal na gumagana kahit na walang FormData). Sa iyong nakikita, ang FileReader ay nagpapahintulot sa amin na ipakita ang mga user thumbnail ng mga file na kanilang i-u-upload (inaasahan natin ay mga larawan).

Wala sa aming tatlong mga tampok ang gagana sa IE9, kaya lahat ng mga gumagamit ng IE ay magkakaroon ng isang normal na karanasan sa pag-upload (ngunit aking naiintindihan na may suporta para sa “FileReader” na makikita sa IE10 Dev Preview 2). Ang FileReader ay hindi gumagana sa pinakabagong bersyon ng Safari (5.1), kaya hindi nila makikita ang mga thumbnails, ngunit makikita nila ang AJAX upload at ang mensahe ng conpirmasyon. At sa huli, ang Opera 10.50 ay may FileReader na suporta ngunit walang FormData na suporta, kaya makikita nila ang mga thumbnails, ngunit normal lang na mga uploads.

Ngayong wala na sa landas ang mga ito, mag-code na tayo!


Hakbang 1: Ang Markup at ang Pag-Istilo

Magsimula tayo sa iilan na panimulang markup at pag-istilo. Syempre, ito ay hindi ang pangunahing bahagi ng pagtuturo, Hindi ko kayo tatratuhin bilang isang baguhan.

Ang HTML

Medyo madali ba? Mayroon kaming isang form na nagpopost sa upload.php, na ating titingnan sa isang saglit, at isang single input element, sa type na file. Pansinin na ito ay may boolean multiple na attribute, na nagpapahintulot sa gumagamit para makapili ng maraming mga file sa isang pagkakataon.

 ‘Yan lang talaga ang lahat na kailangan mong makita dito. Tayo’y magpatuloy.

Ang CSS

Lubos na walang ikakagulat dito.


Hakbang 2: Ang PHP

Kailangan na kaya nating mahawakan ang mga file na upload sa  likuran din, kaya paguusapan natin ito sa susunod.

upload.php

Pakatandaan na ang mga ito ay ang mga unang linya ng PHP na aking isinulat sa loob ng isang taon (Ako ay isang Ruby na lalaki). Dapat na ikaw ay gagawa ng karagdagang seguridad; ngunit, tayo lamang ay nagsisigurado na walang mali sa pag upload. Kung ganyan ang kaso, gagamitin natin ang built – in na move_uploaded_file para mailipat ito sa isang uploads na folder. Huwag kakalimutan na siguraduhing ang folder na ito ay writable.

Kaya, ngayon, dapat tayo’t magkaroon ng isang gumagana na upload form. Pipili ka ng isang larawan (marami, kung gusto mo at kung pwede sa ang iyong browser), i-click ang “Upload Files!” na buton, at makakatanggap ka ng mensaheng “Successfully Uploaded Images.”

Ito ang hitsura ng aming munting proyekto sa ngayon:

The styled form

Ngunit, kaya lang, ngayo’y 2011 na: Gusto natin ang mas pa dito. Iyong mapapansin na aming iniugnay ang jQuery at ang isang upload.js na file. Ating buksan ito ngayon.


Hakbang 3: Ang JavaScript

Huwag nating aksayahin ang oras: Tayo na!

Dito tayo magsisimula. Gagawa tayo ng dalawang mga variables: input ay ang ating file input element; ang formdata ay gagamitin para magpadala ng mga larawan papunta sa server kung sinusuportahan ito ng browser. Ating i-initialize ito sa false at saka titingnan kung ang browser ay sumusuporta sa FormData; kung ito ay sumusuporta, gagawa tayo ng bagong FormData na object. Gayundin, kung maaari nating ipasa ang mga larawan sa pamamagitan ng AJAX, hindi na kailangan ang “Upload Images!” na buton, kaya maaari itong itago. Bakit hindi natin ito kailangan? Ang mainam, ating gagawin ay i-auto-magically na i-upload ang mga larawan agad pagkatapos na piliin ang mga ito ng gumagamit.

Ang natitira sa JavaScript ay mapupunta sa loob ng iyong anonymous na self-invoking na function. Sa susunod ay gagawa tayo ng isang munting helper na function na magpapakita ng mga larawan kapag nakuha na ang mga ito ng browser:

Ang function ay may isang parametro: ang image source (makikita natin kung paano ito makukuha mayamaya). Pagkatapos, ating hahanapin ang listahan sa ating markup at gagawa ng isang list item at larawan. Ating itatakda ang image source patungo sa source na ating natanggap, ilagay ang larawan sa loob ng list item, at ilagay ang list item sa loob ng list. Voila!

Susunod, dapat nating kunin ang mga larawan, ipakita ang mga ito, at i-upload ang mga ito. Tulad ng aming sinabi, gagawin namin ito kapag ang onchange na event ay ipinutok sa input element.

Hindi na dapat tayo magaalala tungkol sa proprietary event model ng IE, dahil sinusuportahan ng IE9+ ang standard na  addEventListener na function.

May dagdag pa, ngunit magsimula tayo dito. Sa pagsisimula, hindi na dapat tayo magaalala tungkol sa proprietary event model ng IE, dahil sinusuportahan ng IE9+ ang standard na addEventListener na function (at ang IE9 at pababa ay hindi sinusuportahan ang aming mga bagong tampok).

Kaya, anong gusto nating gawin kapag ang gumagamit ay nakapili na ng mga files? Una, gagawa tayo ng iilang mga variables. Ang mahalaga lang sa ngayon ay ang len = this.files.length. Ang mga file na napili ng gumagamit ay makikita galing sa object this.files. Sa ngayon, inaalala lamang natin ang length property, para ma-loop nating ang mga file…

Na eksaktong gagawin natin sa susunod. Sa loob ng ating loop, ating itatakda ang kasulakuyan na file tungo sa file para sa madaliang pag-access. Ang susunod na bagay na ating gagawin ay compirmahin na ang file ay isang larawan. Maaaring gawin ito sa pamamagitan ng pagkumpara ng type property sa isang regular na expression. Hinahanap natin ang type na nagsisimula sa “image” at sinusundan ng kahit ano. (ang double-bang sa unahan ay nagpapalit lamang sa resulta na maging boolean.)

Kaya, ano ang gagawin natin kung may larawan tayo sa ating mga kamay?

Ating titingnan kung ang browser ay sumusuporta sa paggawa nga mga FileReader na object. Kung it ay sumusuporta, gagawa tayo ng isa.

Ganito namin paano ginamit ang isang FileReader na object: Ipapasa natin ang ating file na object sa reader.readAsDataURL na paraan. Ito ay gagawa ng data url para sa inupload na larawan. Ito ay hindi gumagana sa paraang iyong inaaasahan. Ang data url ay hindi napapasa pabalik mula sa function. Sa halip, ang data url ay magiging bahagi sa isang event na object.

Iniisip ang mga ito, kakailanganin nating irehistro ang isang function sa reader.onloadend na event. Ang function na ito ay kukuha ng isang event na object, kung saan natin nakukuha ang data url: ito ay nasa e.target.result (oo, ang e.target ay ang reader na object, ngunit nagkaroon ako ng mga problema kapag ginagamit ang reader sa halip na ang e.target sa loob ng function na ito). Ipapasa lamang natin ang data url na ito papunta sa ating showUploadedItem na function (na sinulat natin sa itaas).

Susunod, ating i-checheck ang formdata na object. Tandaan, kung ang browser ay sumusuporta sa FormData, ang formdata ay magiging isang FormData na object; kung hindi sumusuporta, it ay magiging false. Kaya, kung tayo ay may FormData na object, ating tatawagin ang append na paraan. Ang layunin ng isang FormData na object ay humawak ng mga value na iyong ipapasa sa pamamagitan ng isang form; kaya, ang append the paraan ay kukuha ng isang key at isang value. Sa ating kaso, ang ating key ay images[]; sa pagdagdag ng kwadradong mga bracket sa huli, ating sinisiguro na bawat oras na ating idinudugtong ang isa pang value, atin itong idinudugtong sa array na iyon, sa halip nga sulatan ulit ang image property.

Malapit na tayong matapos. Sa loob ng ating for loop, ating ipinakita ang bawat larawan sa gumagamit at idinagdag ang mga ito sa formdata na object. Ngayon, kailangan lang nating i-upload ang mga larawan. Sa labas ng for loop, ito ang huling piraso ng ating suliranin:

Muli, sisiguraduhin natin na may FormData na suporta tayo; kung wala, ang “Upload Files!” na buton ay makikita, at ganyan paano mag upload ng mga larawan ang gumagamit. Gayunpaman, kung may FormData na suporta tayo, kami na ang bahala sa pag-upload sa pamamagitan ng AJAX. Gumagamit kami ng jQuery para mahawakan ang lahat nga mga kaibahan ng AJAX sa lahat ng mga browser.

Malamang ikaw ay pamilyar sa jQuery’s $.ajax na paraan: ipapasa mo ito sa isang options na object. Ang url, type, at success na mga properties ay dapat na makita. Ang data property ay ang ating formdata object. Pansinin ang processData at contentType na mga properties. Ayon sa dokumentasyon ng  jQuery, ang processData ay naitakda na true sa simula, at magproproceso at babago sa data na maging isang query string. Hindi natin gustong gawin yan, kaya ating itatakda ito na false. Atin ding itatakda ang contentType na maging false para siguruhinna ang data ay mapupunta sa server na ating inaasahan.

At yan lang. Ngayon, kapag ang gagamit i-loload ang page, ito ang kanilang makikita:

Tutorial Image

At pagkatapos nilang pumili ng mga larawan, makikita nila ito:

Tutorial Image

At ang mga larawan na naupload:

Tutorial Image

Tapos na!

Ang pag-u-upload ng mga file sa pamamagitan ng AJAX ay napakaastig, at kamangha-mangha na ang mga panibagong teknolohiyang ito ay sumusuporta nito na hindi kinakailangan ng mahahabang mga hack. Kung ikaw ay may mga katanungan tungkol sa kung ano ang ginawa natin dito, magkomento kayo dito! Maraming maraming salamat sa iyong pagbabasa!

At kung nangangailan ka pa ng tulong dito o sa ibang pang suliranin sa coding, humanap ng suporta dito sa Envato Studio.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.