├── .gitattributes ├── .gitignore ├── README.md ├── index.php ├── script.js ├── style.css └── upload.php /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## Eclipse 3 | ################# 4 | 5 | *.pydevproject 6 | .project 7 | .metadata 8 | bin/ 9 | tmp/ 10 | *.tmp 11 | *.bak 12 | *.swp 13 | *~.nib 14 | local.properties 15 | .classpath 16 | .settings/ 17 | .loadpath 18 | 19 | # External tool builders 20 | .externalToolBuilders/ 21 | 22 | # Locally stored "Eclipse launch configurations" 23 | *.launch 24 | 25 | # CDT-specific 26 | .cproject 27 | 28 | # PDT-specific 29 | .buildpath 30 | 31 | 32 | ################# 33 | ## Visual Studio 34 | ################# 35 | 36 | ## Ignore Visual Studio temporary files, build results, and 37 | ## files generated by popular Visual Studio add-ons. 38 | 39 | # User-specific files 40 | *.suo 41 | *.user 42 | *.sln.docstates 43 | 44 | # Build results 45 | 46 | [Dd]ebug/ 47 | [Rr]elease/ 48 | x64/ 49 | build/ 50 | [Bb]in/ 51 | [Oo]bj/ 52 | 53 | # MSTest test Results 54 | [Tt]est[Rr]esult*/ 55 | [Bb]uild[Ll]og.* 56 | 57 | *_i.c 58 | *_p.c 59 | *.ilk 60 | *.meta 61 | *.obj 62 | *.pch 63 | *.pdb 64 | *.pgc 65 | *.pgd 66 | *.rsp 67 | *.sbr 68 | *.tlb 69 | *.tli 70 | *.tlh 71 | *.tmp 72 | *.tmp_proj 73 | *.log 74 | *.vspscc 75 | *.vssscc 76 | .builds 77 | *.pidb 78 | *.log 79 | *.scc 80 | 81 | # Visual C++ cache files 82 | ipch/ 83 | *.aps 84 | *.ncb 85 | *.opensdf 86 | *.sdf 87 | *.cachefile 88 | 89 | # Visual Studio profiler 90 | *.psess 91 | *.vsp 92 | *.vspx 93 | 94 | # Guidance Automation Toolkit 95 | *.gpState 96 | 97 | # ReSharper is a .NET coding add-in 98 | _ReSharper*/ 99 | *.[Rr]e[Ss]harper 100 | 101 | # TeamCity is a build add-in 102 | _TeamCity* 103 | 104 | # DotCover is a Code Coverage Tool 105 | *.dotCover 106 | 107 | # NCrunch 108 | *.ncrunch* 109 | .*crunch*.local.xml 110 | 111 | # Installshield output folder 112 | [Ee]xpress/ 113 | 114 | # DocProject is a documentation generator add-in 115 | DocProject/buildhelp/ 116 | DocProject/Help/*.HxT 117 | DocProject/Help/*.HxC 118 | DocProject/Help/*.hhc 119 | DocProject/Help/*.hhk 120 | DocProject/Help/*.hhp 121 | DocProject/Help/Html2 122 | DocProject/Help/html 123 | 124 | # Click-Once directory 125 | publish/ 126 | 127 | # Publish Web Output 128 | *.Publish.xml 129 | *.pubxml 130 | 131 | # NuGet Packages Directory 132 | ## TODO: If you have NuGet Package Restore enabled, uncomment the next line 133 | #packages/ 134 | 135 | # Windows Azure Build Output 136 | csx 137 | *.build.csdef 138 | 139 | # Windows Store app package directory 140 | AppPackages/ 141 | 142 | # Others 143 | sql/ 144 | *.Cache 145 | ClientBin/ 146 | [Ss]tyle[Cc]op.* 147 | ~$* 148 | *~ 149 | *.dbmdl 150 | *.[Pp]ublish.xml 151 | *.pfx 152 | *.publishsettings 153 | 154 | # RIA/Silverlight projects 155 | Generated_Code/ 156 | 157 | # Backup & report files from converting an old project file to a newer 158 | # Visual Studio version. Backup files are not needed, because we have git ;-) 159 | _UpgradeReport_Files/ 160 | Backup*/ 161 | UpgradeLog*.XML 162 | UpgradeLog*.htm 163 | 164 | # SQL Server files 165 | App_Data/*.mdf 166 | App_Data/*.ldf 167 | 168 | ############# 169 | ## Windows detritus 170 | ############# 171 | 172 | # Windows image file caches 173 | Thumbs.db 174 | ehthumbs.db 175 | 176 | # Folder config file 177 | Desktop.ini 178 | 179 | # Recycle Bin used on file shares 180 | $RECYCLE.BIN/ 181 | 182 | # Mac crap 183 | .DS_Store 184 | 185 | 186 | ############# 187 | ## Python 188 | ############# 189 | 190 | *.py[co] 191 | 192 | # Packages 193 | *.egg 194 | *.egg-info 195 | dist/ 196 | build/ 197 | eggs/ 198 | parts/ 199 | var/ 200 | sdist/ 201 | develop-eggs/ 202 | .installed.cfg 203 | 204 | # Installer logs 205 | pip-log.txt 206 | 207 | # Unit test / coverage reports 208 | .coverage 209 | .tox 210 | 211 | #Translations 212 | *.mo 213 | 214 | #Mr Developer 215 | .mr.developer.cfg 216 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Ajax image upload 2 | ================= 3 | 4 | A simple tutorial to explain how to implement ajax image uploading using jquery and php with a beautiful progress bar from bootstrap 5 | 6 | 7 | Video Tutorial : http://youtu.be/flaiEXVkdgE 8 | 9 | Live Demo : http://packetcode.com/apps/ajax-image-upload/ 10 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | Ajax Image Upload | Packetcode 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Ajax Image Uploder

18 |

A simple tutorial to explain image uploading using jquery ajax and php

19 | 20 |
22 | 23 |
24 | 25 |
26 | 27 |
28 |
30 | 0% Complete 31 |
32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /** APP: Ajax Image uploader with progress bar 2 | Website:packetcode.com 3 | Author: Krishna TEja G S 4 | Date: 29th April 2014 5 | ***/ 6 | 7 | $(function(){ 8 | 9 | // function from the jquery form plugin 10 | $('#myForm').ajaxForm({ 11 | beforeSend:function(){ 12 | $(".progress").show(); 13 | }, 14 | uploadProgress:function(event,position,total,percentComplete){ 15 | $(".progress-bar").width(percentComplete+'%'); //dynamicaly change the progress bar width 16 | $(".sr-only").html(percentComplete+'%'); // show the percentage number 17 | }, 18 | success:function(){ 19 | $(".progress").hide(); //hide progress bar on success of upload 20 | }, 21 | complete:function(response){ 22 | if(response.responseText=='0') 23 | $(".image").html("Error"); //display error if response is 0 24 | else 25 | $(".image").html(""); 26 | // show the image after success 27 | } 28 | }); 29 | 30 | //set the progress bar to be hidden on loading 31 | $(".progress").hide(); 32 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | /** APP: Ajax Image uploader with progress bar 3 | Website:packetcode.com 4 | Author: Krishna TEja G S 5 | Date: 29th April 2014 6 | ***/ 7 | 8 | body{ 9 | background:#ecf0f1; 10 | } 11 | 12 | .container-main{ 13 | width:500px; 14 | margin:40px auto; 15 | padding:20px; 16 | background:white; 17 | border-radius: 5px; 18 | } -------------------------------------------------------------------------------- /upload.php: -------------------------------------------------------------------------------- 1 | 0) { 24 | echo "0"; 25 | } else { 26 | $target = "upload/"; 27 | move_uploaded_file($_FILES["file"]["tmp_name"], $target. $_FILES["file"]["name"]); 28 | echo "upload/" . $_FILES["file"]["name"]; 29 | } 30 | } else { 31 | echo "0"; 32 | } --------------------------------------------------------------------------------