jquery Upload plugin uploadify use detailed and error handling

Last Update:2015-09-06 Source: Internet

Author: User

Tags unique id

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

Transferred from: http://www.jb51.net/article/43498.htm

About jquery Upload plugin uploadify use a lot of online, basically the same content. I according to the steps of the online configuration completed, will report some errors, and I based on these errors to find solutions online, but there is no relevant information, so in order not to let more friends detours, I have encountered some of the problems I have to summarize, but also convenient for me to check later. What is uploadify

Uploadify is a jquery upload plugin, support multi-file upload, achieve very good results, with progress display.

The website provides a demo of PHP, where I detail the use under ASP.

Download

Official Downloads

Official documents

Official demo

Uploadify provided by the Scripting House
How to use

1 Create a Web project named Jqueryuploaddemo, download the latest version from the official website, unzip and add to the project

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.

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

the code for the 4 Default.aspx HTML page is modified as follows:
Copy CodeThe code is 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>
the ProcessRequest method code for the 5 Uploadhandler class is as follows:
Copy CodeThe code is 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);
If the following code is missing, the upload queue display will not disappear automatically after uploading successfully.
Context. Response.Write ("1");
}
Else
{
Context. Response.Write ("0");
}
}
Note: It is important to note that you must refer to using System.IO; namespaces, the reason I went wrong is also here, the online tutorial basically did not mention this, so a lot of netizens will encounter ioerror error.

6 post-operation effects such as:

　　
7 After selecting two files, click Upload, you can see the UploadFile folder will increase these two files.

The above code simply implements the upload function, relying on the function uploadify implementation, the Uploadify function parameter is JSON format, you can modify the key value of the JSON object to customize the settings, If multi is set to TRUE or false to control whether multiple file uploads are possible, the following is the meaning of these key values:

uploader : The relative path to the uploadify.swf file, which is a button with a text browse, and then fades out of the Open File dialog box with the default value: uploadify.swf. &NBSP
Script : The relative path of the spooler. Default value: uploadify.php
checkscript : The relative path of the spooler that is used to determine whether the uploaded selected file exists on the server
filedataname : Sets a name for the server handler to fetch data from the uploaded file according to that name. The default is filedata
method : Submit by post or get default to post
scriptaccess: The access mode of the Flash script file, if the local test is set to always, the default value: samedomain
folder: directory where files are uploaded. &NBSP
Queueid: The ID of the file queue, which is the same as the ID of the div holding the file queue. &NBSP
queuesizelimit: When multiple file generation is allowed, set the number of selected files, the default value: 999. &NBSP
Multi: Multiple files can be uploaded when is set to true. &NBSP
Auto: Set to True when the file is selected and uploaded directly, false need to click the Upload button to upload. &NBSP
Filedesc: This property value must be set Fileext property before it is valid to set the prompt text in the Select File dialog box, such as set Filedesc to "Please select RAR doc PDF file , open the File selection box effect such as:

Fileext: Sets the type of file that can be selected, in the form of ' *.doc;*.pdf;*.rar '.
sizeLimit: size limit for uploaded files.
simuploadlimit: The default number of simultaneous uploads is allowed: 1.
ButtonText: The text of the browse button, default: Browse.
buttonimg: The path to the picture of the browse button.
Hidebutton: set to True to hide the picture of the browse button.
Rollover: The value is true and False when set to True when the mouse moves over the browse button with a reversal effect.
Width : Set the browse button to the default value: 110.
Height : Sets the altitude of the browse button, the default value: 30.
wmode: Setting this to transparent can make the flash background file of the browse button transparent, and the Flash file will be placed at the highest level of the page. Default value: Opaque.
cancelimg : Select the Close button icon on each file after the file is selected in the file queue, such as:

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

onInit: Do some initialization work .

OnSelect: triggered when selecting a file, the function has three parameters

Event: Events object.
Queueid: A unique identifier for the file, consisting of 6 random characters.
Fileobj: The selected file object has a name, size, CreationDate, Modificationdate, type 5 properties.

The code is as follows:

Copy CodeThe code is 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" +
"File name:" + fileobj.name + "\ r \ n" +
"File Size:" + fileobj.size + "\ r \ n" +
"Creation time:" + fileobj.creationdate + "\ r \ n" +
"Last modified:" + fileobj.modificationdate + "\ r \ n" +
"File type:" + Fileobj.type
);

}
});
});
When you select a file, the message pops up like this:

Onselectonce: Triggered when a file is selected in a single file or multiple file upload. The function has two parameters Event,data,data object has the following properties:

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

OnCancel: Triggered when you click the Close button of a file in the file queue or click Cancel upload. The function has event, Queueid, Fileobj, data four parameters, the first three parameters and onselect in three parameters, the data object has two properties FileCount and Allbytestotal.

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

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

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

OnError: Triggered when an error occurs during upload. 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: Error types, there are three kinds of ' HTTP ', ' IO ', or ' Security '
Info: Description of the error

OnOpen: Triggered when the upload is clicked, if Auto is set to true, it is triggered when the file is selected, and if more than one file is uploaded, the entire file queue is traversed. The function has the event, Queueid, fileobj three parameters, the parameter is interpreted as above.

OnProgress: Triggered when the upload is clicked, if Auto is set to true, it is triggered when the file is selected, and if more than one file is uploaded, it traverses the entire file queue and fires after OnOpen. This 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 of the file queue that has already been uploaded
Speed: Upload Rate kb/s

OnComplete: Triggers when file upload is complete. The function has four parameters event, Queueid, Fileobj, response, data five parameters, the first three parameters ibid. Response is the value returned by the spooler, in the example above, 1 or 0,data has two properties FileCount and speed

FileCount: The number of files remaining without uploading completed.
Speed: Average rate of file uploads kb/s
Note: The Fileobj object is somewhat different from the one mentioned above, and the OnComplete Fileobj object has a filepath attribute to remove the path to the uploaded file.

Onallcomplete: Triggers when all files in the file queue are uploaded. The function has an event and data two parameters, and data has four properties, respectively:

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

Introduction to related functions

In the above example, Uploadifyupload and uploadifyclearqueue two functions have been used, in addition to several functions:

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

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

If the Upload button event is written as follows, the file will be uploaded to the directory defined in the Uploadifysettings

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

Uploadifycancel: The function accepts a queueid as a parameter that cancels the file specified Queueid in the file queue.

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

OK, all the configuration is done. Let's talk about some of the problems I have encountered. Span style= "FONT-SIZE:18PT;" > Possible issues 1. After I start the configuration is complete, and does not work properly, Flash (uploadify.swf ') does not load. Later I see Jquery.uploadify.v2.1.0.js found that the plug-in is the use of swfobject.js dynamic creation of Flash, and then I do the experiment alone or can not display flash, without resistance to restart the computer after it. fainted ~ ~ ~ 2.FLASH finally loaded in, but the upload failed. Newspaper IOError,

Think of the solution, turn over the network, and finally in a foreign site saw such a sentence using System.IO; Add to the enlightened!!

No other problems have been encountered for the time being, follow-up discovery problems added.

jquery Upload plugin uploadify use detailed and error handling

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