11/16/13
AJAX File Upload jQuery Tutorial
H ome
C oding
Tut oria ls
H ow
Tools
SEO
AJAX File Upload jQuery Tutorial
Coding Tutorials
Posted By Ravishanker kusuma on Jun 26th 2013
11 Tw eet 2
AJAX File Upload jQuery Tutorial covers how to
upload files asynchronously using jQuery Framework. I have used jQuery Form plugin for ajax file upload.
Adv e r ti s e He r e
Popular
Latest
How URL shortening works
November 5, 2012
Before starting the tutorial, we need to know the usage of jQuery Form Plugin.
AJAX File Upload jQuery Tutorial
June 26, 2013
jQuery Form Plugin Usage:
1 2 3 4 $ ( ' # m y F o r m ' ) . a j a x F o r m ( f u n c t i o n ( ){ a l e r t ( " F o r mi ss u b m i t t e d " ) ; } ) ; / / w h e r em y F o r mi st h ef o r mi d
Login With Twitter Tutorial
July 9, 2013
Facebook Javascript SDK Tutorial
July 10, 2013
1/12
hayageek.com/ajax-file-upload-jquery/
11/16/13
AJAX File Upload jQuery Tutorial
We can even provide options to ajaxForm to get callbacks like success,error, uploadProgress and beforeSend.
1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 v a ro p t i o n s={ b e f o r e S e n d :f u n c t i o n ( ) {
Objective-C PLIST tutorial
July 20, 2013
Top ics
A PI F ac e book
} , Goog le Inte r ne t u p l o a d P r o g r e s s :f u n c t i o n ( e v e n t ,p o s i t i o n ,t o t a l ,p e r c e n t C o m p l e t e ) {
iO S Jav asc r ip t
} , s u c c e s s :f u n c t i o n ( ) { } , c o m p l e t e :f u n c t i o n ( r e s p o n s e ) { / / r e s p o n s et e x tf r o mt h es e r v e r . } } ; $ ( ' # m y F o r m ' ) . a j a x F o r m ( o p t i o n s ) ;
j Q ue r y Pdf PHP
O bj e c tiv e -C Tw itte r
U RL S hor te ne r W or dp r e ss y outube
beforeSen d : this function called before form
submission
uploadProgress : this function called when the
upload is in progress success : this function is called when the form upload is successful. complete : this function is called when the form upload is completed.
Client Side Code
1) Below is the simple HTML form which handles file uploads .
hayageek.com/ajax-file-upload-jquery/
2/12
11/16/13
AJAX File Upload jQuery Tutorial
1 2 3 4 5 6 7 8 9 1 0 1 1 1 2
< f o r mi d = " m y F o r m "a c t i o n = " u p l o a d . p h p "m e t h o d < i n p u tt y p e = " f i l e "s i z e = " 6 0 "n a m e = " m y f i l e " < i n p u tt y p e = " s u b m i t "v a l u e = " A j a xF i l eU p l o a d " < / f o r m > < d i vi d = " p r o g r e s s " > < d i vi d = " b a r " > < / d i v > < d i vi d = " p e r c e n t " > 0 % < / d i v> < / d i v > < b r / > < d i vi d = " m e s s a g e " > < / d i v >
2) Add jQuery and Form Plugin scripts in the head tag.
1 2 < s c r i p ts r c = " h t t p : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y / 1 . 1 0 . 1 / j q u e r y . m i n . j s < s c r i p ts r c = " h t t p : / / m a l s u p . g i t h u b . c o m / j q u e r y . f o r m . j s
3) When the document is loaded, initialize the ajax form.
1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { v a ro p t i o n s={ b e f o r e S e n d :f u n c t i o n ( ) { $ ( " # p r o g r e s s " ) . s h o w ( ) ; / / c l e a re v e r y t h i n g $ ( " # b a r " ) . w i d t h ( ' 0 % ' ) ; $ ( " # m e s s a g e " ) . h t m l ( " " ) ; $ ( " # p e r c e n t " ) . h t m l ( " 0 % " ) ; } , u p l o a d P r o g r e s s :f u n c t i o n ( e v e n t ,p o s i t i o n ,t o t a l ,p e r c e n t C o m p l e t e ) {
3/12
hayageek.com/ajax-file-upload-jquery/
11/16/13
AJAX File Upload jQuery Tutorial
1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9
$ ( " # b a r " ) . w i d t h ( p e r c e n t C o m p l e t e + ' % ' $ ( " # p e r c e n t " ) . h t m l ( p e r c e n t C o m p l e t e + } , s u c c e s s :f u n c t i o n ( ) { $ ( " # b a r " ) . w i d t h ( ' 1 0 0 % ' ) ; $ ( " # p e r c e n t " ) . h t m l ( ' 1 0 0 % ' ) ;
} , c o m p l e t e :f u n c t i o n ( r e s p o n s e ) { $ ( " # m e s s a g e " ) . h t m l ( " < f o n tc o l o r = ' g r e e n ' > " } , e r r o r :f u n c t i o n ( ) { $ ( " # m e s s a g e " ) . h t m l ( " < f o n tc o l o r = ' r e d ' >E R R O R :u n a b l et ou p l o a df i l e s < / f o n } } ; $ ( " # m y F o r m " ) . a j a x F o r m ( o p t i o n s ) ; } ) ;
Put t ing It All Toge t he r: up loa d.ht ml
1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7
< ! d o c t y p eh t m l > < h e a d > < s c r i p ts r c = " h t t p : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y / 1 . 7 / j q u e r y . j s < s c r i p ts r c = " h t t p : / / m a l s u p . g i t h u b . c o m / j q u e r y . f o r m . j s < s t y l e > f o r m{d i s p l a y :b l o c k ;m a r g i n :2 0 p xa u t o ;b a c k g r o u n d :# e e e ;b o r d e r r a d i u s :1 0 p x ; # p r o g r e s s{p o s i t i o n : r e l a t i v e ;w i d t h : 4 0 0 p x ;b o r d e r :1 p xs o l i d# d d d ;p a d d i n g :1 p x ; # b a r{b a c k g r o u n d c o l o r :# B 4 F 5 B 4 ;w i d t h : 0 % ;h e i g h t : 2 0 p x ;b o r d e r r a d i u s :3 p x ;} # p e r c e n t{p o s i t i o n : a b s o l u t e ;d i s p l a y : i n l i n e b l o c k ;t o p : 3 p x ;l e f t : 4 8 % ;} < / s t y l e > < / h e a d > < b o d y > < h 1 > A j a xF i l eU p l o a dD e m o < / h 1 > < f o r mi d = " m y F o r m "a c t i o n = " u p l o a d . p h p "m e t h o d < i n p u tt y p e = " f i l e "s i z e = " 6 0 "n a m e = " m y f i l e " < i n p u tt y p e = " s u b m i t "v a l u e = " A j a xF i l eU p l o a d " < / f o r m > < d i vi d = " p r o g r e s s " > < d i vi d = " b a r " > < / d i v > < d i vi d = " p e r c e n t " > 0 % < / d i v> < / d i v > < b r / > < d i vi d = " m e s s a g e " > < / d i v >
4/12
hayageek.com/ajax-file-upload-jquery/
11/16/13
AJAX File Upload jQuery Tutorial
2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 4 0 4 1 4 2 4 3 4 4 4 5 4 6 4 7 4 8 4 9 5 0 5 1 5 2 5 3 5 4 5 5 5 6 5 7 5 8 5 9 6 0 6 1 6 2 6 3 6 4 6 5 6 6 6 7 6 8 6 9 7 0 7 1 7 2
< s c r i p t > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) { v a ro p t i o n s={ b e f o r e S e n d :f u n c t i o n ( ) { $ ( " # p r o g r e s s " ) . s h o w ( ) ; / / c l e a re v e r y t h i n g $ ( " # b a r " ) . w i d t h ( ' 0 % ' ) ; $ ( " # m e s s a g e " ) . h t m l ( " " ) ; $ ( " # p e r c e n t " ) . h t m l ( " 0 % " ) ; } , u p l o a d P r o g r e s s :f u n c t i o n ( e v e n t ,p o s i t i o n ,t o t a l ,p e r c e n t C o m p l e t e ) { $ ( " # b a r " ) . w i d t h ( p e r c e n t C o m p l e t e + ' % ' ) ; $ ( " # p e r c e n t " ) . h t m l ( p e r c e n t C o m p l e t e + ' % ' ) ; } , s u c c e s s :f u n c t i o n ( ) { $ ( " # b a r " ) . w i d t h ( ' 1 0 0 % ' ) ; $ ( " # p e r c e n t " ) . h t m l ( ' 1 0 0 % ' ) ; } , c o m p l e t e :f u n c t i o n ( r e s p o n s e ) { $ ( " # m e s s a g e " ) . h t m l ( " < f o n tc o l o r = ' g r e e n ' } , e r r o r :f u n c t i o n ( ) { $ ( " # m e s s a g e " ) . h t m l ( " < f o n tc o l o r = ' r e d ' } } ; $ ( " # m y F o r m " ) . a j a x F o r m ( o p t i o n s ) ; } ) ; < / s c r i p t > < / b o d y > < / h t m l >
F or Mult ip le File Up loa ds check this: http://hayageek.com/docs/jquery-upload-file.php
Server Side
Below is the sample PHP code, which handle file uploads. up loa d.p hp
1 2 < ? p h p / / u p l o a d . p h p
5/12
hayageek.com/ajax-file-upload-jquery/
11/16/13
AJAX File Upload jQuery Tutorial
3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1
$ o u t p u t _ d i r=" u p l o a d s / " ; i f ( i s s e t ( $ _ F I L E S [ " m y f i l e " ] ) ) { / / F i l t e rt h ef i l et y p e s,i fy o uw a n t . i f( $ _ F I L E S [ " m y f i l e " ] [ " e r r o r " ]>0 ) { e c h o" E r r o r :".$ _ F I L E S [ " f i l e " ] [ " e r r o r " } e l s e { / / m o v et h eu p l o a d e df i l et ou p l o a d sf o l d e r ; m o v e _ u p l o a d e d _ f i l e ( $ _ F I L E S [ " m y f i l e " e c h o" U p l o a d e dF i l e: " . $ _ F I L E S [ " m y f i l e " } } ? >
I f y o u li ke the po s t, P leas e s hare i t wi th y o ur fri ends :
11 Tw eet 2
To get the lates t updates Fo llo w us :
HayaGeek
Follow
+ 24
Follow @hayageek
+1
44 followers
Y o u m ight l ike this: jQuery Multiple File Upload with Progress bar Tutorial jQuery AJAX POST Example
hayageek.com/ajax-file-upload-jquery/ 6/12
11/16/13
AJAX File Upload jQuery Tutorial
jQuery AJAX Form Submit Example jQuery URL Shortener using Google URL Shortener API jQuery Submit Form Example
L ate st Posts
B io
Late st p osts by Rav ishanke r ku su ma (see all)
iOS Geofencing API Tutorial Using Core Location Framework - October 9, 2013 iOS NSURLSession Example (HTTP GET, POST, Background Downlads ) - October 7, 2013 jQuery AJAX Form Submit Example September 19, 2013 September 11, 2013
Greasemonkey Tutorial for Beginners jQuery AJAX POST Example - August 27, 2013
Tags: Jav as c r i p t
jQue r y
29 comments Leave a message...
Best Share Naagii Nb
Avatar
2 months ago
tank you very much, nice work. but how to fix ie7, ie8, ie9 ? try { form.submit(); } catch(err) { var submitFn = document.createElement('form').submit; submitFn.apply(form); // error line
hayageek.com/ajax-file-upload-jquery/
7/12
11/16/13
submitFn.apply(form); // error line }
2 1
Reply Share
AJAX File Upload jQuery Tutorial
Janus
Naagii Nb a month ago
I don't get it.... Where shall i but this Try {option ??
1
Reply Share
hay ageek
Mod
Janus
a month ago
Janus, If you manually choose the file and submit the form, then there will not be any exception. Y ou will get exception, when you invoking file dailog. Issues is that. IE7,8,9 dont allow open file dialog programatically. Check this: it works in all browsers http://hayageek.com/docs/jquer...
Reply Share
janus
hayageek a month ago
Thanks.. And i do invoke the dialog programatically.. This link off your looks great.. perhaps i'm stupid.. but $("#fileuploader").uploadFile({ url:"Y OUR_FILE_UPLOAD_URL", if i write Uploads/ it doesn't work fileName:"myfile" is this for file-rename use ?? });
Reply Share
hayageek.com/ajax-file-upload-jquery/ 8/12
11/16/13
AJAX File Upload jQuery Tutorial
hay ageek
Mod
janus a month ago
Janus, fileName is not for renaming file. fileName:"myfile" equals to <input name="myfile" type="file"> I am creating input file dynamically,
Reply Share
Janus
hayageek a month ago
Okay... could you please explain url:"Y OUR_FILE_UPLOAD_URL", it doesn't work when i write "uploads/" and i have the folder.. can i add an file upload handler - to rename the uploaded file ??? It seems as im missing something ??
Reply Share
janus
Janus a month ago
Sorry... now i found the missing part... it works fine : thanks !!!
Reply Share
Avatar
Gregory Lanc as t er
3 days ago
How would I add this onto a pre-existing form? I have a form with regular text inputs, and checkboxes. Id like to add an image upload box as well so the whole thing can be submitted with ajax. Having an issue understanding how this would work with a .post .
hayageek.com/ajax-file-upload-jquery/ 9/12
11/16/13
AJAX File Upload jQuery Tutorial
Reply Share
Avatar
A lejandro Javier V illaln Nava
a month ago
This served me Thanks for the explanation,
Reply Share
Avatar
GoodS t uff
a month ago
Works! Perfect! Thanks a lot hayageek!!
Reply Share
Avatar
Does nt work
a month ago
doesnt work at all..
Reply Share
hay ageek
Mod
Doesnt work
a month ago
What is not working. Which browser you have tested ? and what is the error ?
1
Reply Share
Avatar
fdfdf
a month ago
Reply Share
not working in wordpress it can't read filename
Avatar
qy h
2 months ago
Reply Share
thanks
Avatar
Igor
2 months ago
Reply Share
Thank you very much, this helped me a lot.
Avatar
gamek at hu
2 months ago
How to Filter file type? I want to restrict certain file types
Reply Share
hay ageek
Mod
gamekathu
2 months ago
10/12
hayageek.com/ajax-file-upload-jquery/
Check this:
11/16/13
Check this: http://hayageek.com/docs/jquer... There is no options for blacklisting. Y ou can specify the list of extensions to be allowed.
Reply Share
AJAX File Upload jQuery Tutorial
Avatar
Liy a
3 months ago
Hi Wanna ask u something like when i am adding multipart/formdata in form taga action page giving me error 400.Please give me a soln if u have my email id [email protected] and the page is hmd.ae/test.php bottom of page there is a submit button
Reply Share
Avatar
mic k
3 months ago
It cant upload a large file like around 60MBs. I have tried with small files it works but it cant handle large files which is most important thing to have, only then progress bar makes sense.
Reply Share
hay ageek
Mod
mick 3 months ago
File size limitation is server configuration. Can you check your webservers's php.ini or httpd.conf what is the max value. http://www.cyberciti.biz/faq/l...
1
Reply Share
mic k
hayageek 3 months ago
Y es you were very righ, dude you know few things and I am impressed. Would you like to make some money....
Reply Share
hay ageek
hayageek.com/ajax-file-upload-jquery/
Mod
mick
11/12
3 months ago
11/16/13
3 monthsAJAX ago File Upload jQuery Tutorial
Y es. I would like to. but how ?
Reply Share
Avatar
Ed
3 months ago
if ever I placed the upload inside a form with other form elements, will the other form elements be POSTed also?
Reply Share
hay ageek
Mod
Ed 3 months ago
yes all the form elements are posted
Reply Share
Avatar
allenne
3 months ago
wow good work, simple and understandable.. how can i make it mutiple upload?
Reply Share
Avatar
Taoufik
4 months ago
Hi, I did the same code as you but the succes callback was never called
Reply Share
hay ageek
Mod
Taoufik
4 months ago
Reply Share
share your code link. i will check.
eric nic k us
hayageek 3 months ago
<form action="../admin/pieces/newuploader.php? <?php echo $passvar; ?>"
Powered by WordPress
hayageek.com/ajax-file-upload-jquery/
12/12
