Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
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.
designmodo.com/create-upload-form/
2/18
2/17/13
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
< 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>
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
<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
designmodo.com/create-upload-form/
3/18
2/17/13
}; )
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
/ 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>
designmodo.com/create-upload-form/
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;
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
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
designmodo.com/create-upload-form/
5/18
2/17/13
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
designmodo.com/create-upload-form/
6/18
2/17/13
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
designmodo.com/create-upload-form/
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;
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
-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;
designmodo.com/create-upload-form/
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 }
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
.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.
designmodo.com/create-upload-form/
9/18
2/17/13
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
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.
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.
designmodo.com/create-upload-form/
10/18
2/17/13
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
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
1.
Leszek May 23, 10:27 am
designmodo.com/create-upload-form/
11/18
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
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
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
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
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
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
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
designmodo.com/create-upload-form/
13/18
2/17/13 Hi,
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
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
designmodo.com/create-upload-form/
14/18
2/17/13
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
14.
triasbrata Nov 1, 3:17 am
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
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
2/17/13
Jacky Dec 1, 4:21 pm
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
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
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...
Notify me of followup comments via e-mail. You can also subscribe without commenting.
designmodo.com/create-upload-form/
16/18
2/17/13
How to Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
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 Create an Upload Form using jQuery, CSS3, HTML5 and PHP - Designmodo
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
designmodo.com/create-upload-form/
18/18