Somehow for personal purposes I needed to do ajax download of several files at once. But I wanted to make it beautiful and comfortable.
For this task, I chose my beloved jquery and several plug-ins to it.
A simple php script was also written (doajaxfileupload.php file).
Now a little more about everything.The
Multiple File Upload plugin allows you to select multiple files for uploading, it also allows you to limit file types, the number of files to select, checks whether a file is already selected and much more. The latest version of the plugin was used, however, two lines were changed to work with my php form, they are marked with the text "- replace by spiritzzz".
')
The form plugin was used for ajax sending files to the server. Very good plugin, it can find many uses, I advise you to look at off. site.
BlockUI Plugin serves only for decorative purposes, displays beautiful error messages of the Multiple File Upload plugin, and you can not use it.
The archive, the link to which can be found below, contains the latest versions of these plugins, as well as two php files -
index.php and
doajaxfileupload.php .
The
index.php actually contains the html form, the jQ and all the plugins are loaded:
$( '.MultiFile' ).MultiFile({
accept: 'jpg|gif|bmp|png|rar' , max:15, STRING: {
remove: '' ,
selected: ': $file' ,
denied: ' : $ext!' ,
duplicate: ' :\n$file!'
}});
* This source code was highlighted with Source Code Highlighter .
$( '.MultiFile' ).MultiFile({
accept: 'jpg|gif|bmp|png|rar' , max:15, STRING: {
remove: '' ,
selected: ': $file' ,
denied: ' : $ext!' ,
duplicate: ' :\n$file!'
}});
* This source code was highlighted with Source Code Highlighter .
- here are the allowed file extensions, their maximum number (15), as well as the localization of error messages.
$( "#loading" ).ajaxStart( function (){({
...
});
* This source code was highlighted with Source Code Highlighter .
$( "#loading" ).ajaxStart( function (){({
...
});
* This source code was highlighted with Source Code Highlighter .
- shows and hides the animation picture when sending
$( '#uploadForm' ).ajaxForm({
...
});
* This source code was highlighted with Source Code Highlighter .
$( '#uploadForm' ).ajaxForm({
...
});
* This source code was highlighted with Source Code Highlighter .
- is responsible for sending files to the server
I will not consider
doajaxfileupload.php , everything is simple enough, and if you have questions, write in the comments.
PS: after downloading a lot of debug information is displayed: errors, size and type of file and so on. This is easily commented in the doajaxfileupload.php file.
You can download customized, podtochennuyu all this thing
here.UPD. online sample is temporarily unavailable.