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 liyashereef@gmail.com 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? &lt;?php echo $passvar; ?&gt;"

Powered by WordPress

hayageek.com/ajax-file-upload-jquery/

12/12