First of all, simple kan: it seems that there has been two months of time has not written articles, but still like before at least one Chice every day is in the garden to see the great God of the article. Some days ago in the study of "Ajax No Refresh upload" aspects of some plug-ins, with swfupload to achieve the function of no refresh upload, but the individual feel is not perfect.
yesterday I found a name on the internet called uploadify jquery upload Plug-ins, see a few articles in the garden is also introduced this plug-in, I thought why not use this to try.
but these articles in the garden. uploadify or the previous version of uploadify-v2.1.0, I downloaded on the official web is the uploadify-v3.1 version, some of the parameters and call methods are also different, fortunately the official website has help documents.
(the only thing that feels bad about this is that this development package is for PHP, not the official website.) NET version, but at least the principle is the same, simple to modify it. Or that sentence "not only to know it, but also to know why ", know why, everything is a cloud ah )
Well, don't say much nonsense. The first effect chart, there is a picture of the truth:
One: from the official website to download the development package added to the project, I made a simplification of the development package, delete those PHP files:
Basic structure of the project:
Second: Add a reference to CSS and JS files:
Note the order in which jquery.js files and uploadify.js files are called.
Three: The code for the Default.aspx page is as follows:
| The code is as follows | Copy Code |
| <title></title> |
|
IV: General handler uploadhandler.ashx simple code as follows:
| The code is as follows | Copy Code |
| public void ProcessRequest (HttpContext context) } public bool IsReusable |
|
Five: The parameters used to introduce:
By looking at the default settings in Jquery.uploadify-3.1.js and referencing the official documentation, you can learn:
parameter is not reset, leave the default:
Relative path of swf:uploadify.swf file
Uploader: The relative path of the background handler
ButtonText: The text displayed by the button
The type of upload file defaults to all Files ' *.* '
You can specify by using the following two parameters, specifying the code in step three:
filetypedesc;filetypeexts;
Auto: True indicates that the file is automatically uploaded after selecting it, and if you do not want to automatically upload it, set it to false and pass
| The code is as follows | Copy Code |
| 1 <a href= "javascript:$ (' #uploadify '). Uploadify (' upload ')" > upload </a>| 2 <a href= "javascript:$ (' #uploadify '). Uploadify (' Cancel ')" > cancel upload </a> |
|
To specify whether to upload or cancel the upload;
Multi: Set to True will allow multiple file uploads;
Method: The Submit way post or get defaults to post;
Queuesizelimit: When multiple files are allowed to upload, set the number of selected files, the default value is 999;
In addition, the cancellation of the upload image path is set in the CSS file;
Additional settings can refer to the official website's help documentation.
VI: The complete displayed after the upload is displayed as Chinese
A garden friend proposed "
English complete can not be changed to Chinese ", this may be the previous version can not be modified." I looked at the source code Jquery.uploadify-3.1.js to find what was displayed when the upload was complete:
Referring to the official Help documentation, it can be found that in the
onuploadsuccess "event can set the code to be executed after the upload completes, the modified code is:
Automatically upload files after selecting them
| code is as follows | copy code |
| ' auto ': true, //Set to True will allow multiple file uploads ' Multi ': true, //Upload successful after ' onuploadsuccess ': function (file, Data, response) { $ (' # ' + file.id). Find ('. Data '). HTML (' upload completed '); |
|
There is also a point to note is: Generally when you set the option to upload the file path, such as only allow uploading *.jpg;*.png;*.gif format picture files, in addition to the specified filetypedesc;filetypeexts two parameters, Also in the server-side that is, the general handler again to upload files to the file extension to judge, in case some users skip client authentication upload malicious files.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
