jquery Upload plugin uploadify use detailed and error handling

jquery Upload plugin uploadify use detailed and error handling _jquery

Last Update:2017-01-19 Source: Internet

Author: User

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

What is uploadify

Uploadify is a jquery upload plug-in, support for multiple file uploads, the effect is very good, with progress shown.

The official website provides is the PHP demo, here I detailed introduction in the ASP.net under the use.

Download

Official Downloads

Official documents

Official demo

Uploadify download address provided by the cloud-dwelling community
How to use

1 Create a Web project, named Jqueryuploaddemo, download the latest version from the official web and add it to the project after decompression

2 Add the Uploadhandler.ashx file to the project to process the upload of the file.

3 Add the UploadFile folder to the project to store the uploaded files.

After completing the three steps above the basic structure of the project is as follows:

The code for the 4 Default.aspx HTML page is modified as follows:

Copy Code code as follows:

<title>Uploadify</title>
<link href= "Js/jquery.uploadify-v2.1.0/example/css/default.css"
Rel= "stylesheet" type= "Text/css"/>
<link href= "Js/jquery.uploadify-v2.1.0/uploadify.css"
Rel= "stylesheet" type= "Text/css"/>

<script type= "Text/javascript"
Src= "Js/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js" ></script>

<script type= "Text/javascript"
Src= "Js/jquery.uploadify-v2.1.0/swfobject.js" ></script>

<script type= "Text/javascript"
Src= "Js/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js" ></script>

<script type= "Text/javascript" >
$ (document). Ready (function ()
{
$ ("#uploadify"). Uploadify ({
' Uploader ': ' js/jquery.uploadify-v2.1.0/uploadify.swf ',
' Script ': ' Uploadhandler.ashx ',
' cancelimg ': ' Js/jquery.uploadify-v2.1.0/cancel.png ',
' Folder ': ' UploadFile ',
' Queueid ': ' Filequeue ',
' Auto ': false,
' Multi ': true
});
});
</script>

<body>
<div id= "Filequeue" ></div>
<input type= "File" Name= "uploadify" id= "Uploadify"/>
<p>
<a href= "javascript:$ (' #uploadify '). Uploadifyupload ()" > Upload </a>|
<a href= "javascript:$ (' #uploadify '). Uploadifyclearqueue ()" > Cancel upload </a>
</p>
</body>

5 The ProcessRequest method code for the Uploadhandler class is as follows:

Copy Code code as follows:

public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/plain";
Context. Response.Charset = "Utf-8";

Httppostedfile file = context. request.files["Filedata"];
String Uploadpath =
HttpContext.Current.Server.MapPath (@context. request["folder"] + "\ \";

if (file!= null)
{
if (! Directory.Exists (Uploadpath))
{
Directory.CreateDirectory (Uploadpath);
}
File. SaveAs (Uploadpath + file. FileName);
The following code is missing, upload the queue after the success of the display will not automatically disappear
Context. Response.Write ("1");
}
Else
{
Context. Response.Write ("0");
}
}

Note: Here you must note that you must refer to the using System.IO namespace, the reason why I went wrong is also here, the online tutorials basically did not mention this, so there are many netizens will encounter ioerror errors.

6 after the operation effect of the following figure:

　　
7 Select two files, click Upload, you can see the UploadFile folder will add these two files.

The above code simply realizes the upload function, relies on the function uploadify implementation, the Uploadify function parameter is the JSON format, may make the custom setting to the JSON object's key value modification, If multi is set to TRUE or false to control whether multiple file uploads are possible, here's what these key values mean:

uploader : uploadify.swf file relative path, the SWF file is a text browse button, click and Fade Open file dialog, default value: uploadify.swf.
script : The relative path of the background handler. Default value: uploadify.php
checkscript : Used to determine the relative path of a background handler that uploads selected files to the presence of the server
filedataname : Sets a name, in the server handler according to the name to fetch the data of the uploaded file. Default is Filedata
Method: Submit to post or get defaults to post
scriptaccess:Flash script file access mode, if the local test is set to always, default value: Samedomain
folder: The directory where the uploaded files are stored.
Queueid: ID of the file queue, which is the same as the ID of the div that holds the file queue.
queuesizelimit: When multiple file generation is allowed, set the number of selected files, the default value: 999.
Multi: Multiple files can be uploaded when set to True.
Auto: set to True when the file is selected directly uploaded, for false need to click the Upload button to upload.
Filedesc: This property value must set the Fileext property before it is valid to set the prompt text in the Select File dialog box, such as setting Filedesc as "Please select RAR doc PDF File", the effect of opening the file selection box is as follows:

Fileext: Sets the type of file that can be selected, in the format of: ' *.doc;*.pdf;*.rar '.
sizelimit: size limit for uploading files.
simuploadlimit: allow simultaneous upload of the number of defaults: 1.
ButtonText: The text of the browse button, default: Browse.
buttonimg: The path to the picture of the browse button.
Hidebutton: set to True hides the picture of the browse button.
rollover: A value of true and false, when set to true, has a reversal effect when the mouse is moved over the browse button.
Width : Sets the navigation button widths, the default value: 110.
Height : Sets the browse button heights, default value: 30.
wmode: set this as transparent to make the flash background file transparent for the browse button, and the Flash file will be placed at the top level of the page. Default value: Opaque.
cancelimg : Select the Close button icon on each file in the file queue, as shown in the following figure:

The value of key values described above is either a string or a Boolean type, which is simpler, and the value of the key to be introduced next is a function that can return some information to the user when selecting a file, error, or other action.

onInit: Do some initialization work .

onselect: triggers when selecting a file, which has three parameters

Event: Events object.
Queueid: A unique identification of the file, consisting of 6 random characters.
Fileobj: Selected file object with name, size, CreationDate, Modificationdate, type 5 properties.

The code is as follows:

Copy Code code as follows:

$ (document). Ready (function ()
{
$ ("#uploadify"). Uploadify ({
' Uploader ': ' js/jquery.uploadify-v2.1.0/uploadify.swf ',
' Script ': ' Uploadhandler.ashx ',
' cancelimg ': ' Js/jquery.uploadify-v2.1.0/cancel.png ',
' Folder ': ' UploadFile ',
' Queueid ': ' Filequeue ',
' Auto ': false,
' Multi ': true,
' OnInit ': function () {alert ("1");},
' Onselect ': function (E, Queueid, fileobj)
{
Alert ("Unique ID:" + queueid + "\ r \ n" +
"FileName:" + fileobj.name + "\ r \ n" +
"File Size:" + fileobj.size + "\ r \ n" +
"Create Time:" + fileobj.creationdate + "\ r \ n" +
"Last Modified Time:" + fileobj.modificationdate + "\ r \ n" +
"File type:" + Fileobj.type
);

}
});
});

The message that pops up when you select a file is the following image:

Onselectonce: When a single file or multiple file upload, select the file when the trigger. The function has two parameters event,data,data the object has the following several properties:

FileCount: Select the total number of files.
filesselected: Select the number of files at the same time, if 3 files selected at a time the property value is 3.
Filesreplaced: If A and b two files already exist in the file queue, A and B are selected when the file is selected again, and the property value is 2.
Allbytestotal: The total size of all selected files.

OnCancel: Trigger when clicking on the Close button of file in file queue or clicking Cancel upload. The function has event, Queueid, Fileobj, data four parameters, the first three parameters with three parameters in Onselect, the data object has two properties FileCount and Allbytestotal.

FileCount: After canceling a file, the number of files remaining in the file queue.
Allbytestotal: The size of the remaining files in the file queue after a file is canceled.

Onclearqueue: Triggered when a function fileuploadclearqueue is called. There are event and data two parameters, with two corresponding parameters in the OnCancel.

Onqueuefull: Triggered when Queuesizelimit is set and the number of files selected exceeds the Queuesizelimit value. The function has two arguments event and Queuesizelimit.

OnError: Triggered when an error occurs during the upload process. The function has the event, Queueid, Fileobj, errorobj four parameters, of which the first three parameters, Errorobj object has type and info two properties.

Type: Wrong types, three kinds of ' HTTP ', ' IO ', or ' security '
Info: Description of the error

OnOpen: Click on upload Trigger, if the auto set to True is to select the file trigger, if more than one file upload will traverse the entire file queue. The function has three parameters of event, Queueid and Fileobj, and the parameters are explained as above.

OnProgress: Click on upload Trigger, if the auto set to True is to select the file trigger, if there are multiple file uploads traverse the entire file queue, triggered after OnOpen. The function has event, Queueid, Fileobj, data four parameters, the first three parameters are explained above. The data object has four properties percentage, bytesloaded, allbytesloaded, Speed:

Percentage: Percentage of current completion
Bytesloaded: The size of the current upload
Allbytesloaded: The size that has been uploaded in the file queue
Speed: Upload Rate kb/s

OnComplete: Triggered after file upload completes. The function has four parameters event, Queueid, Fileobj, response, data five parameters, the first three parameters ibid. Response the value returned for the spooler, in the example above 1 or 0,data has two attributes FileCount and speed

FileCount: The number of files remaining without upload completed.
Speed: Average rate of file uploads kb/s
Note: The Fileobj object is somewhat different from what is mentioned above, and OnComplete Fileobj object has a FilePath property that can take the path of the uploaded file.

Onallcomplete: Triggered after all files in the file queue have been uploaded. The function has event and data two parameters, and data has four properties, respectively:

Filesuploaded: The number of files uploaded.
Errors: Number of errors occurred.
allbytesloaded: Total size of all uploaded files.
Speed: Average upload rate kb/s

Introduction to related functions

Uploadifyupload and Uploadifyclearqueue Two functions have been used in the above example, and there are several other functions:

Uploadifysettings: You can dynamically modify the key values described above, such as the following code

　　$ (' #uploadify '). Uploadifysettings ('folder ',' JS ');

If the event of the upload button is written as follows, the file will be uploaded to the uploadifysettings defined directory

<a href= "javascript:$ (' #uploadify '). Uploadifysettings (' folder ', ' JS '); $ (' #uploadify '). Uploadifyupload () "> upload </a>

Uploadifycancel: This function takes a queueid as an argument and can cancel the file specified Queueid in the file queue.

　　
　　$ (' #uploadify '). Uploadifycancel (ID);

All right, all the configuration is complete. Let's talk about some of the problems I've encountered. Span style= "FONT-SIZE:18PT;" > problems that may be encountered 1. I just started configuration completed, and does not work, Flash (uploadify.swf ' ) is not loaded. Later I looked at Jquery.uploadify.v2.1.0.js found that the plug-in is the use of swfobject.js dynamically created Flash, and then I do the experiment alone or can not show flash, under the reboot after the computer can be. Faint ~ ~ ~ ~ 2.FLASH finally loaded in, but the upload failed. Newspaper IOError, as shown in figure:

Baffled, rummaged through the major networks, and finally in a foreign site to see such a sentence using System.IO; Add to the enlightened!!

No other problems have been encountered for the time being, and subsequent discovery problems are added.
Uploadify download address provided by the cloud-dwelling community

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

jquery Upload plugin uploadify use detailed and error handling _jquery

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support