jquery No refresh upload uploadify3.1 simple use _jquery

Yesterday found a web site called uploadify jquery upload Plug-ins, see a few articles are introduced this plug-in, I thought why not use this try.

However, these articles on the Internet to use the uploadify or the previous version of the old uploadify-v2.1.0, I downloaded the official web is uploadify-v3.1 version, some of the parameters and the method is 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:

public void ProcessRequest (HttpContext context)
{context
 . Response.ContentType = "Text/plain";
 http://www.cnblogs.com/babycool/
 //Receive uploaded files Httppostedfile file
 = context. request.files["Filedata"];
 Other parameters
 //string Somekey = context. request["Somekey"];
 string other = context. request["Someotherkey"];
 Gets the save path for the file
 string uploadpath =
  HttpContext.Current.Server.MapPath ("uploadimages" + "\");
 Determine if the uploaded file is an empty
 if (file!= null)
 {
  if (! Directory.Exists (Uploadpath))
  {
   directory.createdirectory (uploadpath);
  }
  Save File
  . SaveAs (Uploadpath + file. FileName);
  Context. Response.Write ("1");
 }
 else
 {context
  . Response.Write ("0");
 }

public bool IsReusable
{
 get
 {return
  false;
 }
}

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

<a href= "javascript:$ (' #uploadify '). Uploadify (' upload ')" > Upload </a>| 
<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 netizen 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 is completed, the modified code is:

Automatically upload ' auto ' When file is selected
: true,
//set to True will allow multiple files to upload
' multi ': true,
///Upload successful execute
' onuploadsuccess ': function (file, data, response) {
 $ (' # ' + file.id). Find ('. Data '). HTML (' upload completed ');

Another point to note is: generally when you choose 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.

The following is a link to the two articles I found in the blog Park for your reference: Uploadify.

Jquery uploadify Upload Plugin use detailed

jquery Plugin uploadify ajax-enabled image upload

and attach the official website of Uploadify

I organized the development package: finishing Uploadify-v3.1.net Development Package

Of course, this is just a simple trial, the specific use of the project has to consider many aspects of the problem.

Welcome to the Great God a lot of advice, if the article for you to help you can discuss the discussion.

The above is the entire content of this article, I hope to give you a reference, but also hope that we support the cloud habitat community.