Uploadify simple test based on jquery without refreshing upload

Source: Internet
Author: User
Tags documentation httpcontext relative save file

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

<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 ',
background-processed pages
' Uploader ': ' Uploadhandler.ashx ',
The text that the button displays
' ButtonText ': ' Upload pictures ',
Height and width of display, default height 30;width 120
' Height ': 15,
' Width ': 80,
The type of upload file defaults to all files ' all file '; '*.*'
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},
The ID of the element that you want to use as the file queue in the upload file page, default to False automatically generation, without #
' Queueid ': ' Filequeue ',
Automatically upload files after selecting them
' Auto ': true,
Set to True to allow multiple file uploads
' Multi ': true

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

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

The code is as follows Copy Code

public void ProcessRequest (HttpContext context)
Context. Response.ContentType = "Text/plain";
Receive the uploaded file
Httppostedfile file = context. request.files["Filedata"];
Other parameters
String Somekey = context. request["Somekey"];
string other = context. request["Someotherkey"];
Get the save path for a file
String Uploadpath =
HttpContext.Current.Server.MapPath ("uploadimages" + "\");
To 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");
Context. Response.Write ("0");


public bool IsReusable
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:


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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.