jquery No refresh upload uploadify simple trial

Last Update:2017-08-11 Source: Internet

Author: User

Tags httpcontext save file

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First simple kan two sentences: Seemingly already have two months of time has not written the article, but still will be like before every day at least one two hours is soaked in the garden to see you the great God article. Some days ago in the research "Ajax No Refresh upload" aspects of some plug-ins, with swfupload to achieve the function of no refresh upload, but the personal feel is not perfect.

Yesterday in the online found a called uploadify jquery upload plugin, see the garden has a few articles is also introduced this plug-in, I thought why not try this.

But the garden of this article used in the uploadify or old version of uploadify-v2.1.0, I downloaded on the official website is the uploadify-v3.1 version, some of the parameters and calling methods are also different, fortunately, the official website has a help document.

(The only thing that feels bad is that the development package is for PHP, and the official website does not.) NET version, but at least the principle is the same, a simple modification can be done. Or that sentence "not only to know it, but also to know its why", know its why, everything is a cloud AH)

Well, don't say much nonsense. First, there is a picture of the truth:

A: Download the development package from the official website add to the project, I made a simplification of the development package, delete the PHP files:

Project BASIC structure:

Two: Add a reference to the CSS and JS files:

Note the order in which the Jquery.js files and uploadify.js files are called.

Three: The Code of the Default.aspx page is as follows:

<title></title>
<link href= "Js/uploadify/uploadify.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Js/jquery-1.4.1-vsdoc.js" type= "Text/javascript" ></script>
<script src= "Js/uploadify/jquery.uploadify-3.1.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#uploadify"). Uploadify ({
Specify SWF file
' swf ': ' js/uploadify/uploadify.swf ',
Pages processed in the background
' Uploader ': ' Uploadhandler.ashx ',
The text that the button displays
' ButtonText ': ' Upload image ',
Display height and width, default height 30;width 120
' Height ': 15,
' Width ': 80,
The type of upload file defaults to all files ' all '; ‘*.*‘
Text displayed in the File Type drop-down menu at the bottom of the Browse window
' Filetypedesc ': ' Image Files ',
Allow file suffixes to be uploaded
' filetypeexts ': ' *.gif; *.jpg; *.png ',
Other parameters sent to the background are specified by Formdata
' FormData ': {' somekey ': ' somevalue ', ' Someotherkey ': 1},
Upload File page, the ID of the element you want to use as the file queue, default to False auto-generated, without #
' Queueid ': ' Filequeue ',
Automatically upload after selecting a file
' Auto ': true,
Set to True to allow multiple file uploads
' Multi ': true
});
});

</script>
<body>
<div>
<%--used as a file queue area--%>
<div id= "Filequeue" >
</div>
<input type= "File" Name= "uploadify" id= "Uploadify"/>
<p>
<a href= "javascript:$ (' #uploadify '). Uploadify (' upload ')" > Upload </a>|
<a href= "javascript:$ (' #uploadify '). Uploadify (' Cancel ')" > Cancel upload </a>
</p>
</div>
</body>

Four: General handler uploadhandler.ashx simple code as follows:

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

}

public bool IsReusable
{
Get
{
return false;
}
}

Five: The parameters used are introduced:

By looking at the default settings in Jquery.uploadify-3.1.js and referring to the official documentation, you will know:

If the parameter is not re-specified, it remains the default:

Relative path to the swf:uploadify.swf file

Uploader: The relative path of the spooler

ButtonText: The text displayed by the button

The type of upload file defaults to all Files ' *. * '

Can be specified by the following two parameters, the specified method is shown in step three of the code:

filetypedesc;filetypeexts;

Auto: True to automatically upload after selecting a file, if you do not want to upload automatically, set to false, and through

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 to allow multiple file uploads;

Method: Submit by post or get default to post;

Queuesizelimit: When multiple file uploads are allowed, the number of selected files is set, the default value is 999;

In addition, the path to cancel the uploaded image is set in the CSS file;

Additional settings can be found in the official website's help documentation.

VI: Complete display as Chinese after uploading completed

One of the park friends proposed "

The English complete cannot be changed to Chinese ", which may be the previous version cannot be modified. I found what was displayed when the upload was completed by looking at the source code jquery.uploadify-3.1.js:

Refer to the official Help document for more information on the

Onuploadsuccess "event, you can set the code executed after the upload is complete, the modified code is:

Automatically upload after selecting a file
' Auto ': true,
Set to True to allow multiple file uploads
' Multi ': true,
Execute after successful upload
' Onuploadsuccess ': function (file, data, response) {
$ (' # ' + file.id). Find ('. Data '). HTML (' upload complete ');

}

Another thing to note is: Generally in the selection of the upload file path, such as only allow uploading *.jpg;*.png;*.gif format image files, in addition to specifying filetypedesc;filetypeexts; two parameters, Also in the server-side is the general handler again to the file extension of the upload file to judge, in case some users skip client authentication to upload malicious files.

The following is a link to the two articles I found in the blog park about uploadify, for your reference:

jquery Upload plugin uploadify use detailed

Upload images of Ajax effects using plugin Uploadify

and attach the official website of Uploadify

I tidy up the development package: organize the Uploadify-v3.1.net development package

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

Welcome to the Great God, if the article is helpful to you, you can discuss it together.

Reprint please indicate the source.

jquery No refresh upload uploadify simple trial

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More