How To Create An Upload Form Using Jquery, CSS3, HTML5 and PHP - Designmodo

2/17/13 Categories Design Freebies Tutorials Coding Inspiration WordPress Resources Shop
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
RSS Twitter Facebook Google+ Dribbble 336788 Subscribers & Followers Facebook Twitter Google+
Username Password Login
Lost Password?
Categories Design Freebies Tutorials Coding Inspiration WordPress Resources Shop Search
Follow us RSS Twitter Facebook Google+ Dribbble 336788 Subscribers & Followers Share Facebook Twitter Google+
Username Password Login
Lost Password?
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP
Valeriu Timbuc Tutorials May 21, 2012 29 Comments
designmodo.com/create-upload-form/
1/18
2/17/13
PanteneProV
TryPanteneShampoo&ConditionerImprove yourHairHealth&Strength
www.PanteneIndonesia.co.id
Topic: jQuery / CSS3 Difficulty: Advanced Estimated Completion Time: 1 hour In this tutorial we will code an Upload Form from Impressionist UI by Vladimir Kudinov. We will code it using the Plupload API. Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads. This way we are able to create a very powerful upload form compatible with all browsers. So lets get started.
Step 1 Files Structure

The file structure is very simple. First you need to download the Plupload API and the jQuery UI Progressbar. Then create all the necessary folders and add the files mentioned bellow. css Add here the .css files. img Add here the images. js Add here the scripts. uploads Here will be saved the uploaded files.
-s cs -tl.s syecs -m ig -mgsflshr iae ie ee -s j -qeyporsbrmnj jur-rgesa.i.s -lpodfl.s pula.ulj -lpodfahsf pula.ls.w -lpodslelgtxp pula.ivrih.a -pod ulas -poddflsge hr ulae ie os ee -ne.tl idxhm -podpp ula.h
Step 2 HTML Markup

Create a < i >with the class upload-form and id uploader. Then we need to add the heading, the close button, the text paragraph, the select and upload buttons, the dv < i >were we will add the selected files, the progress bar and the close after upload checkbox. dv
<i cas"podfr"i=ulae" dv ls=ula-om d"podr> <- Fr Haig-> !- om edn <1cas"elc-et>podFr<h> h ls=rpaetx"Ula om/1 < he=# cas"ls"tte"ls Wno"<m sc"m/ls-utnpg at"ls"<a a rf"" ls=coe il=Coe idw>ig r=igcoebto.n" l=Coe>/> <>as aogiemn o isSuhatAinnihor,i wl konfrpouig<p pLo, lnsd ay f t otes sa egbus s el nw o rdcn./> <- Slc &Ula Bto -> !- eet pod utn <i> dv
2/18
2/17/13
< cas"utn i=pcfls he=#>eet/> a ls=bto" d"ikie" rf""Slc<a < cas"utn i=ulafls he=#>pod/> a ls=bto" d"podie" rf""Ula<a <dv /i> <- Fl Ls -> !- ie it <i i=flls"cas"b>/i> dv d"ieit ls=c"<dv <- Pors Br-> !- rges a <i i=porsbr>/i> dv d"rgesa"<dv <- CoeAtrUla -> !- ls fe pod <i i=coefe" dv d"lsAtr> <pncas"hcbx> sa ls=ceko" <nu tp=ceko"nm=ceko"i=ceko" ipt ye"hcbx ae"hcbx d"hcbx> <ae fr"hcbx>ls wno atrula<lbl lbl o=ceko"Coe idw fe pod/ae> <sa> /pn <dv /i>
<dv /i>
Step 3 Adding the Script Files

Next think that we will do is adding the JS scripts that we will use on our upload form. So we will start by adding the jQuery API, Ive used the one hosted by Google CDN if you want you can download and host it on your own server. Next you need to add the plupload.full.js and the jquery-progressbar.min.js file. Add all this scripts to the < e d of you page. ha>
EZComet
ThebestAjax/Cometserviceever.Register nowforfree!
ezcomet.com
<ed ha> <eacast"t-" mt hre=uf8> <il>podFr<tte tteUla om/il> <citsc"tp:/jxgolai.o/jxlb/qey172jur.i.s>/cit srp r=hts/aa.ogepscmaa/isjur/../qeymnj"<srp> <citsc"spula.ulj"<srp> srp r=j/lpodfl.s>/cit <citsc"sjur-rgesa.i.s>/cit srp r=j/qeyporsbrmnj"<srp> <cit srp> / Ula Fr CniuainHr * * pod om ofgrto ee / <srp> /cit <ha> /ed
Step 4 Upload Form Configuration

In this step we will add the upload form functionality. Without this code it will not work. Ive explained what does each piece of code with inline comments. Make sure you read them. If you have any question you can post on the comments. For more configuration setting you can read the Plupload Documentation.
<cittp=tx/aacit>/<[DT[ srp ye"etjvsrp"/ !CAA / Ula Fr / pod om $fnto( { (ucin) / Stig //////////////////////// / etns //////////////////////// vrulae =nwpula.podr{ a podr e lpodUlae( rnie :'tl,ls,ivrih' / Strnie,hr i wl ueHM5 i ntspotdwl uefah ec utms hm5fahslelgt, / e utms ee t il s TL, f o upre il s ls, t. bos_utn:'ikie' / Tei o teslc flsbto rwebto pcfls, / h d n h eet ie utn mlislcin fle / Alwt slc oefl ec tm ut_eeto: as, / lo o eet n ie ah ie cnanr:'podr,/ Tei o teula fr cnanr otie ulae' / h d f h pod om otie mxfl_ie:'0k' / Mxmmfl sz alwd a_iesz 10b, / aiu ie ie loe ul:'podpp,/ Teult teula.h fl r ula.h' / h r o h podpp ie fahsful:'spula.ls.w' / Teult ty fahfl ls_w_r j/lpodfahsf, / h r o he ls ie slelgtxpul:'spula.ivrih.a' / Teult teslelgtfl ivrih_a_r j/lpodslelgtxp, / h r o h ivrih ie fles:[{il :"mg fls,etnin :"p,i,n" ]/ Fle teflsta wl b soe o teslc f itr tte Iae ie" xesos jggfpg} / itr h ie ht il e hwd n h eet
3/18
2/17/13
}; )
/ SatUla ////////////////////// / tr pod ////////////////////// / We tebto wt tei "ulafls i cikdteula wl sat / hn h utn ih h d #podie" s lce h pod il tr $'ulafls)cikfnto(){ (#podie'.lc(ucine ulae.tr(; podrsat) epeeteal(; .rvnDfut) }; ) ulae.nt) / IiilzsteUlae isac adad itra eetlsees podrii(; / ntaie h podr ntne n ds nenl vn itnr. / Slce Fls///////////////////// / eetd ie ///////////////////// / We teue slc afl i wi apn oedvwt tecas"deFl"adauiu i t te"flls"dv / hn h sr eet ie t il ped n i ih h ls addie n nqe d o h #ieit i. / Ti apne dvwl cnantefl nm adarmv bto / hs pedd i il oti h ie ae n eoe utn ulae.id'ieAdd,fnto(p fls { podrbn(Flsde' ucinu, ie) $ec(ie,fnto(,fl){ .ahfls ucini ie $'flls'.ped' (#ieit)apn( <i cas"deFl"i='+fl.d+'> +fl.ae+'ahe=# i='+fl.d+' cas"eoeie>/> +'/i> dv ls=addie d" iei "' ienm < rf"" d" iei " ls=rmvFl"<a' <dv '; ) }; ) u.ers(;/ Rpsto FahSlelgt prfeh) / eoiin ls/ivrih }; ) / ErrAet/////////////////////// / ro lr ////////////////////// / I a errocr a aetwno wl pppwt teerrcd aderrmsae / f n ro cus n lr idw il ou ih h ro oe n ro esg. / E:we aue ad afl wt nwalwdetnin / x hn sr ds ie ih o loe xeso ulae.id'ro' fnto(p er { podrbn(Err, ucinu, r) aet"ro:"+ercd +" Msae "+ermsae+(r.ie?" Fl:"+erfl.ae:")+") lr(Err r.oe , esg: r.esg erfl , ie r.ienm " "; u.ers(;/ Rpsto FahSlelgt prfeh) / eoiin ls/ivrih }; ) / Rmv fl bto /////////////////// / eoe ie utn /////////////////// / O cikrmv tefl fo teqee / n lc eoe h ie rm h uu $'.eoeie)lv(cik,fnto(){ (armvFl'.ie'lc' ucine ulae.eoeieulae.eFl(hsi); podrrmvFl(podrgtieti.d) $''ti.d.eoe) (#+hsi)rmv(; epeeteal(; .rvnDfut) }; ) / Pors br////////////////////// / rges a ////////////////////// / Adtepors brwe teula sat / d h rges a hn h pod trs / Apn tetotpwt tecretpretg / ped h oli ih h urn ecnae ulae.id'podrges,fnto(p fl){ podrbn(UlaPors' ucinu, ie vrporsBrau =u.oa.ecn; a rgesaVle pttlpret $'porsbr)fdI(.rgesa( (#rgesa'.aen)porsbr{ vle porsBrau au: rgesaVle }; ) $'porsbr.iporsbrvle)hm(<pncas"rgesoli"'+u.oa.ecn +'<sa>) (#rgesa u-rgesa-au'.tl'sa ls=porsTotp> pttlpret %/pn'; }; ) / Coewno atrula //////////////// / ls idw fe pod /////////////// / I ceko i cekdwe teula i cmlt i wl coetewno / f hcbx s hce hn h pod s opee t il ls h idw ulae.id'podopee,fnto( { podrbn(UlaCmlt' ucin) i ((.podfr #hcbx)at(cekd) { f $'ula-om ceko'.tr'hce') $'ula-om)fdOt'lw) (.podfr'.aeu(so'; } }; ) / Coewno ////////////////////// / ls idw ////////////////////// / We tecoebto i cikdcoetewno / hn h ls utn s lce ls h idw $'ula-om.ls'.n'lc' fnto(){ (.podfr coe)o(cik, ucine $'ula-om)fdOt'lw) (.podfr'.aeu(so'; epeeteal(; .rvnDfut) }; ) };/ edo teula fr cniuain ) / n f h pod om ofgrto / ]>/cit / ]<srp>
Step 5 Form Wrapper

Now well start styling our form. First well add some reset styles to the elements that we will be using. Then well style the form container: add a background pattern and a css3 gradient on top; set the width to 200px (the total will be 250px because of the paddings); set the minimum height to 180px (the total will be 270px because of the paddings), we need to set the minimum because when we will add files to upload the box will need to be bigger; and add the rounded corners. We will also add a clear floats class to use it further.
/ Rst* * ee / .podfr, ula-om .podfr dv ula-om i, .podfr sa, ula-om pn .podfr ipt ula-om nu, .podfr a ula-om , .podfr h, ula-om 1 .podfr p{ ula-om mri:0 agn ; pdig 0 adn: ; bre:nn; odr oe otie nn; uln: oe } / Fr Cnanr* * om otie / .podfr { ula-om psto:rltv; oiin eaie
4/18
2/17/13
zidx 10 -ne: 0; cro:dfut usr eal; wdh 20x it: 0p; mnhih:10x i-egt 8p; pdig 2p 2p 6p 2p; adn: 5x 5x 5x 5x -ektbre-ais 3x wbi-odrrdu: p; -o-odrrdu:3x mzbre-ais p; bre-ais 3x odrrdu: p;
bcgon:ul./m/podb.n) akrud r(.igula-gpg; bcgon:-ektlna-rdettp rb(5,5,5,.)0,rb(,,,.)10) ul./m/podb.n) akrud wbi-iergain(o, ga25252501 % ga00001 0%, r(.igula-gpg; bcgon:-o-iergain(o,rb(5,5,5,.)0,rb(,,,.)10) ul./m/podb.n) akrud mzlna-rdettp ga25252501 % ga00001 0%, r(.igula-gpg; bcgon:--iergain(o,rb(5,5,5,.)0,rb(,,,.)10) ul./m/podb.n) akrud olna-rdettp ga25252501 % ga00001 0%, r(.igula-gpg; bcgon:-slna-rdettp rb(5,5,5,.)0,rb(,,,.)10) ul./m/podb.n) akrud m-iergain(o, ga25252501 % ga00001 0%, r(.igula-gpg; bcgon:lna-rdettp rb(5,5,5,.)0,rb(,,,.)10) ul./m/podb.n) akrud iergain(o, ga25252501 % ga00001 0%, r(.igula-gpg; } / CerFot * * la las / .podfr .b{cer bt;} ula-om c la: oh
Step 6 Heading & Close Button & Paragraph

To style the title we will set the font, the size, the color, etc. In this form Ive added an image for the heading, so Ive created a new class replace-text to replace the text with the image, basically we are hiding the text using the text-indent property and adding the image as a background. For the close button we will set the width and height and position it on the form container. To finish we will add some basic typography styles to the text paragraph.
/ Fr Tte* * om il / .podfr h { ula-om 1 fn-aiy 'rbce M' sn-ei; otfml: Teuht S, assrf fn-egt bl; otwih: od tx-rnfr:uprae ettasom pecs; fn-ie 1p; otsz: 8x clr #666 oo: fff; tx-hdw 0x1x1xrb(,,,.5; etsao: p p p ga000 6) pdigbto:2x adn-otm p; bre-otm 1xsld#ab0 odrbto: p oi 778; } / RpaeTtewt Iae* * elc il ih mg / .podfr h.elc-et{ ula-om 1rpaetx dsly bok ipa: lc; wdh 10; it: 0% hih:1p; egt 7x pdigbto:7x adn-otm p; tx-net -99x etidn: 99p; bcgon:ul./m/il.n)n-eetlf cne; akrud r(.igttepg orpa et etr } / CoeBto * * ls utn / .podfr .ls { ula-om coe psto:aslt; oiin boue dsly bok ipa: lc; wdh 1p; it: 2x hih:1p; egt 2x tp 2p; o: 8x rgt 2p; ih: 4x } / Prgah* * aarp / .podfr p{ ula-om pdig 1p 0 adn: 0x ; fn-aiy sn-ei; otfml: assrf fn-ie 1p; otsz: 2x clr #458 oo: aaa; }
5/18
2/17/13
Step 7 Select & Upload Buttons

Lets style the buttons. Well start by adding the styles for both of them (css3 gradients, font, size and color, etc.). Then we will style the select button: set the width to 99px; make the left corners rounded; add a right border. For the upload button we will set the width to 100px and make the right corners rounded.
/ Slc &Ula Btos* * eet pod utn / .podfr .utn{ ula-om bto dsly iln-lc; ipa: niebok hih:3p; egt 0x mri:1p 0 agn 5x ; fn-aiy sn-ei; otfml: assrf fn-ie 1p; otsz: 4x clr #7; oo: 77 tx-eoain nn; etdcrto: oe tx-rnfr:uprae ettasom pecs; tx-lg:cne; etain etr ln-egt 3p; iehih: 0x bcgon:#fff akrud fff; bcgon:-ektlna-rdettp #fff0,#66610) akrud wbi-iergain(o, fff % fff 0%; bcgon:-o-iergain(o,#fff0,#66610) akrud mzlna-rdettp fff % fff 0%; bcgon:--iergain(o,#fff0,#66610) akrud olna-rdettp fff % fff 0%; bcgon:-slna-rdettp #fff0,#66610) akrud m-iergain(o, fff % fff 0%; bcgon:lna-rdettp #fff0,#66610) akrud iergain(o, fff % fff 0%; } .podfr .utnhvr{ ula-om bto:oe bcgon:#222 akrud fff; bcgon:-ektlna-rdettp #2220,#aaa10) akrud wbi-iergain(o, fff % eee 0%; bcgon:-o-iergain(o,#2220,#aaa10) akrud mzlna-rdettp fff % eee 0%; bcgon:--iergain(o,#2220,#aaa10) akrud olna-rdettp fff % eee 0%; bcgon:-slna-rdettp #2220,#aaa10) akrud m-iergain(o, fff % eee 0%; bcgon:lna-rdettp #2220,#aaa10) akrud iergain(o, fff % eee 0%; } .podfr #ikie { ula-om pcfls wdh 9p; it: 9x fot lf; la: et bre-ih:1xsld#9; odrrgt p oi 99 -ektbre-ais 3x003x wbi-odrrdu: p p; -o-odrrdu:3x003x mzbre-ais p p; bre-ais 3x003x odrrdu: p p; } .podfr #podie { ula-om ulafls wdh 10x it: 0p; fot rgt la: ih; -ektbre-ais 03x3x0 wbi-odrrdu: p p ; -o-odrrdu:03x3x0 mzbre-ais p p ; bre-ais 03x3x0 odrrdu: p p ; }
6/18
2/17/13
Step 8 Selected Files

In this step we will style the selected files that were added to the upload queue. We will give some basics styles to it (background, typography, size, etc.). Then we need to style the remove file from queue button, the styles are also basic (width, height, background, etc.).
/ AddFls* * de ie / .podfr .deFl { ula-om addie psto:rltv; oiin eaie dsly bok ipa: lc; oefo:hde; vrlw idn wr-ra:bekal odbek ra-l; mri-otm 5x agnbto: p; pdig 0002p; adn: 5x hih:3p; egt 0x fn-aiy sn-ei; otfml: assrf fn-ie 1p; otsz: 2x ln-egt 3p; iehih: 0x clr #444 oo: 666; bcgon:#666ul./m/iepg n-eet5xcne; akrud fff r(.igfl.n) orpa p etr -ektbre-ais 3x wbi-odrrdu: p; -o-odrrdu:3x mzbre-ais p; bre-ais 3x odrrdu: p; } / Rmv Fl Bto * * eoe ie utn / .podfr armvFl { ula-om .eoeie psto:aslt; oiin boue dsly bok ipa: lc; wdh 1p; it: 0x hih:1p; egt 0x tp 1p; o: 0x rgt 1p; ih: 0x bcgon:ul./m/eoefl.n) akrud r(.igrmv-iepg; }
Step 9 Upload Progress Bar

Now its time to style our upload progress bar. As we are using the jQuery UI progress bar we need to use the classes generated by the UI in order to style it. We will start by giving a 4px height and 1px border radius. Then we will add a default background color and some shadows. After that we need to style the uploaded progress using a green css3 gradient. To finish we will style the tooltip that will show the uploaded percentage.
/ Pors Br* * rges a /
7/18
2/17/13
.podfr .iporsbr ula-om u-rgesa, .podfr .iporsbrvle{ ula-om u-rgesa-au psto:rltv; oiin eaie hih:4x egt p; -ektbre-ais 1x wbi-odrrdu: p; -o-odrrdu:1x mzbre-ais p; bre-ais 1x odrrdu: p; } .podfr .iporsbr{ ula-om u-rgesa cro:pitr usr one; mri:1p 02p 0 agn 5x 0x ; bcgon:#444 akrud 222;
-ektbxsao:0x1x0xrb(5,5,5,.) wbi-o-hdw p p p ga252525 1; -o-o-hdw 0x1x0xrb(5,5,5,.) mzbxsao: p p p ga252525 1; bxsao:0x1x0xrb(5,5,5,.) o-hdw p p p ga252525 1; } .podfr .iporsbrvle{ ula-om u-rgesa-au bcgon:#234 akrud 8d4; bcgon:-ektlna-rdettp #2340,#1f410) akrud wbi-iergain(o, 8d4 % 5a3 0%; bcgon:-o-iergain(o,#2340,#1f410) akrud mzlna-rdettp 8d4 % 5a3 0%; bcgon:--iergain(o,#2340,#1f410) akrud olna-rdettp 8d4 % 5a3 0%; bcgon:-slna-rdettp #2340,#1f410) akrud m-iergain(o, 8d4 % 5a3 0%; bcgon:lna-rdettp #2340,#1f410) akrud iergain(o, 8d4 % 5a3 0%; } .podfr .iporsbrvlesa.rgesoli { ula-om u-rgesa-au pnporsTotp psto:aslt; oiin boue dsly bok ipa: lc; wdh 3p; it: 6x hih:1p; egt 4x pdig 5x04x0 adn: p p ; tp 1p; o: 0x rgt -8x ih: 1p; fn-aiy sn-ei; otfml: assrf fn-egt bl; otwih: od ln-egt 1p; iehih: 4x tx-lg:cne; etain etr fn-ie 1p; otsz: 2x clr #444 oo: 666; bcgon:tasaetul./m/oli.n)n-eet akrud rnprn r(.igtotppg orpa; }
Step 10 CheckBox
As we cant style checkboxes, the easiest way that Ive found to style theme using only CSS its by replacing the checkbox input with a span tag. This will work this way: first we will hide the checkbox input and style the span tag like a checkbox and then we will update the checkbox using jQuery. So when we will click on the span tag jQuery will update the checkbox input to selected, and when we will click again the span tag jQuery will remove the checked from the checkbox input. As some users may have the JavaScript disabled we need to add a fallback. To do that we will add with jQuery a js class to the body tag. So if the JavaScript will be enabled on the page load it will add a js class to the body and if the JavaScript is disabled the class will not be added. So only the users with JavaScript enabled will have the custom styled checkbox.
/ CoeCeko * * ls hcbx / .podfr #lsAtr{ ula-om coefe psto:aslt; oiin boue bto:2p; otm 5x lf:2p; et 5x } .s.podfr sa.hcbxipttp=hcbx { j ula-om pnceko nu[yeceko] psto:fxd oiin ie;
8/18
2/17/13
lf:-9x et 9p; } .podfr sa.hcbx{ ula-om pnceko psto:rltv; oiin eaie mri-o:1p; agntp 5x fot lf; la: et }
.s.podfr sa.hcbx{ j ula-om pnceko wdh 2p; it: 1x hih:2p; egt 1x cro:pitr usr one; bcgon:ul./m/hcbxpg n-eet0-1x akrud r(.igceko.n) orpa 2p; } .s.podfr sa.hce {bcgon-oiin 00 } j ula-om pncekd akrudpsto: ; .podfr sa.hcbxlbl{ ula-om pnceko ae psto:aslt; oiin boue tp 3x o: p; lf:3p; et 1x fn-aiy sn-ei; otfml: assrf fn-egt bl; otwih: od fn-ie 1p; otsz: 2x clr #444 oo: eee; wiesae nwa; ht-pc: orp }
All the styles that have the js class at the beginning will only be applied if JavaScript is enabled.
Step 11 Checkbox Script

First well add the js class to the body tag and make the checkbox checked by default on load. Then we will check if the checkbox is checked and if the result is false the checked class will be removed from the span and if the result is true the checked class will be added to the span tag. And also we will update the checked / unchecked state to the hidden checkbox.
<cit srp> / CekBxSyig / hc o tln $dcmn)rayfnto( { (ouet.ed(ucin) vrceko =$'ula-omsa.hcbx) a hcbx (.podfr pnceko'; / Ceki JvSrp i eald / hc f aacit s nbe $'oy)adls(j'; (bd'.dCas's) / Mk teceko cekdo la / ae h hcbx hce n od ceko.dCas'hce'.hlrn'nu'.tr'hce' tu) hcbxadls(cekd)cide(ipt)at(cekd, re; / Cikfnto / lc ucin ceko.n'lc' fnto( { hcbxo(cik, ucin) i ((hs.hlrn'nu'.tr'hce'){ f $ti)cide(ipt)at(cekd) $ti)cide(ipt)at(cekd,fle; (hs.hlrn'nu'.tr'hce' as) $ti)rmvCas'hce'; (hs.eoels(cekd) } es { le $ti)cide(ipt)at(cekd,tu) (hs.hlrn'nu'.tr'hce' re; $ti)adls(cekd) (hs.dCas'hce'; } }; ) }; ) <srp> /cit
9/18
2/17/13
Step 12 Upload.php
Open the upload.php file and comment this line $ a g t i = i i g t " p o d t p d r ) . D R C O Y S P R T R . " l p o d ;and uncomment this one treDr n_e(ula_m_i" IETR_EAAO pula" $agti ='pod'. treDr ulas; Example:
/ Stig / etns /$agti =iigt"podtpdr).DRCOYSPRTR."lpod; /treDr n_e(ula_m_i" IETR_EAAO pula" $agti ='pod' treDr ulas;
Conclusion
We finished this tutorial. Now you have a great upload form that you can use on your projects. If you have any questions post it on the comments section. Dont forget to subscribe us for more tutorials and great articles.
Want this freebie? Enter your email and get it now!

Please enter your email address below and click the download button. The download link will be sent to you by email.
Email Address
Download
I agree to receive occasional (monthly/weekly) newsletter with exclusive freebies and content. Your email will not be sold/rented. Unsubscribe at any time.
10/18
2/17/13
ClickbankLandingPage
MakeMoneyonClickBankUsingOur ProfitableWebsiteBuilder
PitchMagic.com
1,235
Tweet
48
Suka
33
Valeriu Timbuc
Valeriu is a Web Designer / Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on Twitter at @vtimbuc or visit his web site at vtimbuc.net.
Related Posts
How to Create Custom Social Media Icons in CSS3
How to Create a CSS3 Mega Drop-Down Menu
20 Excellent jQuery Sliders for your Website

29 Comments
1.
Leszek May 23, 10:27 am
Looks great! How about integrateing it with CodeIgniter? Reply 0
Valeriu May 23, 9:20 pm
11/18
2/17/13 I think theres no need to to that. Reply 0
2.
Joo Henrique May 23, 8:45 pm
I understood the whole story. I wonder how do I file when you go to the selected folder uploads? Because the file is not followed to the folder. Reply 0
Valeriu May 23, 9:21 pm
Make sure you have the right folder path on upload.php file. Reply +1
3.
Christian May 24, 4:32 pm
Great work guys!! This is an high level compatibility and cross browser pack. GOLD for me! Thanks Reply 0
4.
garrett Jun 1, 9:52 pm
What if I wanted to allow more than just img files? Reply 0
garrett Jun 1, 10:02 pm
Nevermind, I figured it out! THANKS! Reply +1
5.
Daniel Simes Jun 13, 4:04 pm
Hi! Is it possible to connect to a Database and update an ID? I want to upload image1, image2, image3 to a given ID. Thanks! Daniel. Reply 0 designmodo.com/create-upload-form/ 12/18
2/17/13
6.
Valeriu Jun 13, 6:24 pm
Hi Daniel, This upload uses the same plugin as wordpress (Plupload). If you have some php knowledge you can link and save and update IDs to the database. For more information you can read the documentation or ask on the forums http://www.plupload.com/. If you want to add custom data to an id edit this code: + file.name + + And attach to upload complete event the code to save it on the database. Reply 0
Edit this code to change the ID: <div class=addedFile id=custom_name_for_id + file.id + > + file.name + <a href=# id=custom_name_for_id + file.id + class=removeFile></a> + </div> Reply 0
7.
Dairon Medina Jun 14, 4:49 pm
What about browser support, can it run on IE6?? Reply 0
Test it yourself :) Btw, who cares if it runs on IE6, why care with IE6? This is a very old browser, if somebody still using it is not my problem, is time to upgrade :) Reply +1
8.
JD Jun 15, 8:23 pm
Excuse my noob comment, but If two different visitors to my site upload an image with the same name will the first image be overwritten? Im still uncertain how the server handles that. Thanks! Reply 0
13/18
2/17/13 Hi,
No it will add an number at the end, you can also use a setting (unique_names : true) to generate unique files names. Reply 0
9.
Sergio Jul 15, 10:20 pm
Hi Valeriu, thank you very much for your tutorial, it is exactly what i was looking for, but i have a little problem: when i upload the file in the directory, nothing happens; there arent files in the folder. How can i solve this problem? Thank you Reply 0
10.
Noel Aug 4, 3:39 pm
Nice one! Is there an easy way of echoing back the uploaded file name / link when uploads are completed? Basicaly I woud like to see the download link when done with uploading. (Im using it to upload small zip files) Thank you for this great peace of code! Reply 0
11.
Someone Like You Sep 9, 1:17 am
Thanks for the tutorial. How can i setup the max numbers of files ? I need to allow users to upload just 5 files. Reply 0
12.
jcobhams Sep 18, 12:03 pm
nice post but y dont you just gather all file in to one zip for a quick downloadsome of us dont want a tutorial but a quick fix to add to our apps and continue building.thanks nut nice post by the way Reply 0
13.
Balachoudry Sep 28, 10:08 am
This script support s only images.I need to upload video files .. what are the changes need to be done. reply soon Reply 0
14/18
2/17/13
14.
triasbrata Nov 1, 3:17 am
its so nice upload design Reply 0
15.
dave Nov 5, 10:05 am
Can you create a source package with everything done and included im messing up somewhere and i dont know where Reply 0
Adrian Nov 5, 11:31 am
check the download button in the body of tutorial. Reply 0
16.
sankar s Nov 20, 12:54 pm
Hi, Your code is very nice. How to show preview image. Reply +1
17.
Christian Nov 23, 8:53 pm
This is awesome! Is there a way for the user to add a title and description to each image that is uploaded so that it can be pulled at later time? For example, an artists page where they want to upload images to different categories, add titles and descriptions which would then be displayed onto the site? I know this might be long winded, but if youve worked on something similar to that Id love to see it or know if this can be modified to suit those requirements. Thanks! Reply 0
18.
Melissa Nov 28, 8:47 am
I changed the file size, but was wondering if there is an easy way to get notification via email if someone upoads to the site? Reply 0
19. designmodo.com/create-upload-form/ 15/18
2/17/13
Jacky Dec 1, 4:21 pm
Is there a way to just include HTML4 and HTML5 support? I dont want heavy upload for my site since Its main priority is not to accept uploads, I want to fall back to normal preloader if user doesnt have HTML5. Pretty basic solution Reply 0
20.
Olinto Dec 17, 9:44 am
this is an excellent work my firends. I`m looking on the web for this kind of work. I want to know i ican do the same without HTML5 Reply 0
21.
Ian Dec 27, 7:09 am
Love this script. Spent months looking for a customized ui for plupload and finally found this. Great work. One question however. I am requiring a callback function after the upload has completed. The default plupload functions have an init and pre init setting that I was previously using before I found this. I have attempted to add the init: setting into the general settings section but does not seem to work. Any help here would be greatly apreciated. Thanks. Reply 0
Ian Dec 27, 7:17 am
Ignore my post above. I got it working :) I did not add a comma to the end of the previous line in the settings. My Bad :) Reply 0
Leave a Reply
* Name * Email
Name Email Leave a comment please...
* Comment Minimum length: 20 characters

Submit Comment
Notify me of followup comments via e-mail. You can also subscribe without commenting.
Top Selling ProductsShow more
UI PACK The Bricks UI Addons Bundle Pack $89
16/18
2/17/13
iOS UI Pandora UI for iOS $39
UI PACK Impressionist UI $39
Newsletter
Sign up for our newsletter to receive periodic articles, updates, freebies and premium items; every month.
Enter your email address 80,825 Subscribers Go Subscribe
Sponsors
- Advertise With Us -
Popular Posts (Month) Flat Design: Can You Benefit from the Trend? Polaris UI Free User Interface Pack How to Create a CSS3 Mega Drop-Down Menu Skeuomorphism in User Interface Design, What is It? The Ultimate UX Design of: the Sign-Up Form Retina Ready Images and Responsive Web Design How to Create a CSS3 Login Form Create a Retro Navigation Menu with CSS3 Linecons Free Vector Icons Pack Create a Website Design using The Bricks UI Latest Tutorials How to Create Custom Social Media Icons in CSS3
designmodo.com/create-upload-form/ 17/18
2/17/13
How to Use Pen Tool in Adobe Photoshop Rapid Prototyping with the Pages Panel in Fireworks CS6 Alignment and Combining Objects in Adobe Illustrator How to Create a CSS3 Mega Drop-Down Menu Create a Website Design using The Bricks UI How to Create a CSS3 Login Form Create a Retro Navigation Menu with CSS3 Creating Objects Using Basic Geometric Shapes in Adobe Illustrator Create a Simple Contact Form in Adobe Photoshop
Privacy Terms Advertise Affiliates About Contact Us Copyright 2013 DesignModo. All Rights Reserved. DMCA Protected Accelerated by MaxCDN
18/18

How To Create An Upload Form Using Jquery, CSS3, HTML5 and PHP - Designmodo

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

How To Create An Upload Form Using Jquery, CSS3, HTML5 and PHP - Designmodo

Încărcat de

Drepturi de autor:

Formate disponibile

2/17/13 Categories Design Freebies Tutorials Coding Inspiration WordPress Resources Shop

Step 1 Files Structure

Step 2 HTML Markup

Step 3 Adding the Script Files

Step 4 Upload Form Configuration

Step 5 Form Wrapper

Step 6 Heading & Close Button & Paragraph

Step 7 Select & Upload Buttons

Step 8 Selected Files

Step 9 Upload Progress Bar

Step 11 Checkbox Script

Want this freebie? Enter your email and get it now!

How to Create Custom Social Media Icons in CSS3

How to Create a CSS3 Mega Drop-Down Menu

20 Excellent jQuery Sliders for your Website

Looks great! How about integrateing it with CodeIgniter? Reply 0

Valeriu May 23, 9:20 pm

2/17/13 I think theres no need to to that. Reply 0

Valeriu May 23, 9:21 pm

What if I wanted to allow more than just img files? Reply 0

garrett Jun 1, 10:02 pm

Nevermind, I figured it out! THANKS! Reply +1

Valeriu Jun 13, 6:33 pm

What about browser support, can it run on IE6?? Reply 0

Valeriu Jun 14, 5:42 pm

Valeriu Jun 15, 11:14 pm

its so nice upload design Reply 0

Adrian Nov 5, 11:31 am

check the download button in the body of tutorial. Reply 0

19. designmodo.com/create-upload-form/ 15/18

Ian Dec 27, 7:17 am

* Comment Minimum length: 20 characters

Top Selling ProductsShow more

UI PACK The Bricks UI Addons Bundle Pack $89

iOS UI Pandora UI for iOS $39

UI PACK Impressionist UI $39

S-ar putea să vă placă și