JQuery Uploadify - multi-upload files using flash
The topic of downloading files without reloading the page has been raised repeatedly. Even I once wrote about it for a long time. Basically, solutions without flash were considered, but today I would like to talk about a plugin for jquery using flash, namely about jQuery Uploadify .
Of course, you can use another flash SWFUpload , but Uploadify, in my opinion, is an order of magnitude easier and simpler, quite suitable for most purposes, and of course we don’t forget that this is a plugin for our beloved jquery, which saves us from connecting any more -or libraries;)
Now let's look at everything with an example.
Using a plugin is very simple, like most other jquery plugins;)
Naturally, first connect the js files:
')
Everyone had noticed swfobject.js ? I will not deviate from the topic, read about the SWFObject and all its advantages in this post on Habré .
Next comes the following code:
Now a little more.
uploader - path to the flash loader uploadify.swf
script is the path to our handler file, I have a functions.php file, but in the archive with the library it is referred to as uploadify.php.
checkScript - the path to the script that will check our file before uploading it to the server. In the file in the archive with the plugin, check for the existence of a file with the same name on the server.
CancelImg - the path to the image, which will symbolize the deletion of the file.
queueID - the id of the element that will contain the list of the files we selected. By default, it is created below the browser file selection button.
auto is a parameter that answers whether files will be automatically downloaded immediately after they are selected or not. If false , you can use this code to start the download:
Naturally, you can hang a picture or a button instead of a link, here you can choose.
multi - whether our plugin will serve to download multiple files, or it won't be :) To download a single file, you can do without a flash, so feel free to leave true here.
fileDesc - file types in the selection dialog. I have only jpg files here.
fileExt - file extensions allowed for download. You can safely add to my jpg and others, for example: * .jpg; *. Bmp; *. Png .
Unforgettable to add these types of files and fileDesc, otherwise you can not select these files in the dialog box;)
I also advise you to check the file types on the server side, because it is easy to get around such a check on the client side;)
onComplete is a function that will be called immediately after the file is loaded. I note, not after downloading all the files, for this there is onAllComplete , namely one file from the queue.
This function will be called every time the next file is loaded. I call the function that gets the response from my functions.php handler and inserts it into the div with the id response :
The page of the plugin itself:
http://www.uploadify.com/
A page with extended documentation on all parameters and functions:
http://www.uploadify.com/documentation/
That's all. There will be questions - I will gladly try to answer them and help in every way;)
Of course, you can use another flash SWFUpload , but Uploadify, in my opinion, is an order of magnitude easier and simpler, quite suitable for most purposes, and of course we don’t forget that this is a plugin for our beloved jquery, which saves us from connecting any more -or libraries;)
Now let's look at everything with an example.
Using a plugin is very simple, like most other jquery plugins;)
Naturally, first connect the js files:
')
<script type= "text/javascript" src= "jquery.uploadify.v2.1.0.min.js" ></script>
<script type= "text/javascript" src= "swfobject.js" ></script>
* This source code was highlighted with Source Code Highlighter .Everyone had noticed swfobject.js ? I will not deviate from the topic, read about the SWFObject and all its advantages in this post on Habré .
Next comes the following code:
$(document).ready(function() {
$( "#uploadify" ).uploadify({
'uploader' : 'uploadify.swf' ,
'script' : 'functions.php' ,
'checkScript' : 'check.php' ,
'cancelImg' : 'cancel.png' ,
'queueID' : 'fileQueue' ,
'auto' : true ,
'multi' : true ,
'fileDesc' : 'jpg' ,
'fileExt' : '*.jpg' ,
'onComplete' : function( event ,queueID,fileObj,response,data) {$( '#response' ).append(response);}
});
});
* This source code was highlighted with Source Code Highlighter .Now a little more.
uploader - path to the flash loader uploadify.swf
script is the path to our handler file, I have a functions.php file, but in the archive with the library it is referred to as uploadify.php.
checkScript - the path to the script that will check our file before uploading it to the server. In the file in the archive with the plugin, check for the existence of a file with the same name on the server.
CancelImg - the path to the image, which will symbolize the deletion of the file.
queueID - the id of the element that will contain the list of the files we selected. By default, it is created below the browser file selection button.
auto is a parameter that answers whether files will be automatically downloaded immediately after they are selected or not. If false , you can use this code to start the download:
<a href= "javascript:$('#uploadify').uploadifyUpload();" > .</a>
* This source code was highlighted with Source Code Highlighter .Naturally, you can hang a picture or a button instead of a link, here you can choose.
multi - whether our plugin will serve to download multiple files, or it won't be :) To download a single file, you can do without a flash, so feel free to leave true here.
fileDesc - file types in the selection dialog. I have only jpg files here.
fileExt - file extensions allowed for download. You can safely add to my jpg and others, for example: * .jpg; *. Bmp; *. Png .
Unforgettable to add these types of files and fileDesc, otherwise you can not select these files in the dialog box;)
I also advise you to check the file types on the server side, because it is easy to get around such a check on the client side;)
onComplete is a function that will be called immediately after the file is loaded. I note, not after downloading all the files, for this there is onAllComplete , namely one file from the queue.
This function will be called every time the next file is loaded. I call the function that gets the response from my functions.php handler and inserts it into the div with the id response :
function( event ,queueID,fileObj,response,data) {$( '#response' ).append(response);}
* This source code was highlighted with Source Code Highlighter .The page of the plugin itself:
http://www.uploadify.com/
A page with extended documentation on all parameters and functions:
http://www.uploadify.com/documentation/
That's all. There will be questions - I will gladly try to answer them and help in every way;)
Source: https://habr.com/ru/post/71772/
All Articles