Detailed analysis of the jQuery plug-in ajaxFileUpload

Detailed analysis of the jQuery plug-in ajaxFileUpload

Function: ajaxFileUpload is a jQuery plug-in for asynchronous file upload.

Syntax: $. ajaxFileUpload ([options])

 

Options parameter description:

Url upload handler address.

The ID of the file field to be uploaded, that is.

Whether secure submission is enabled for secureuri. The default value is false.

The data type returned by the dataType server. It can be xml, script, json, or html. If this parameter is left blank, jQuery will automatically judge it.

The processing function automatically executed after the success is submitted. The parameter data is the data returned by the server.

The processing function automatically executed when the error is submitted.

Data custom parameters. This is useful when data is related to uploaded images.

Type when you want to submit a custom parameter, set this parameter to post.

 

Error message:

1. SyntaxError: missing; before statement error. If this error occurs, check whether the url path can be accessed.

2. SyntaxError: syntax error if this error occurs, check whether the server background processing program that handles the submitted operation has a syntax error.

3. SyntaxError: invalid property id error. If this error occurs, check whether the text domain property ID exists.

4. SyntaxError: missing} in XML expression error. If this error occurs, check whether the file name is consistent or does not exist.

5. For other custom errors, you can directly print the variable $ error to check whether the parameters are correct, which is much more convenient than the above error prompts.

 

Usage:

1. Introduce jQuery and ajaxFileUpload plug-ins first, and pay attention to the sequence.

<Script src = jquery-1.7.1.js type = text/javascript> </script>

<Script src = ajaxfileupload. js type = text/javascript> </script>

 

2. HTML code segment

 

 

 

 

 

 

 

 

3. js Code

<Script src = jquery-1.7.1.js type = text/javascript> </script>

<Script src = ajaxfileupload. js type = text/javascript> </script>

<Script type = text/javascript>

$ (Function ()

{

$ (: Button). click (function ()

{

AjaxFileUpload ();

})

})

Function ajaxFileUpload ()

{

$. AjaxFileUpload ({

Url: '/upload. aspx', // server-side request address used for File upload

Secureuri: false, // whether the security protocol is required. Generally, this parameter is set to false.

FileElementId: 'file1', // ID of the file upload domain

DataType: 'json', // the return value type is generally set to json

Success: function (data, status) // the server responds to the processing function successfully.

{

$ (# Img1). attr (src, data. imgurl );

If (typeof (data. error )! = 'Undefined '){

If (data. error! = ''){

Alert (data. error );

} Else {

Alert (data. msg );

}

}

},

Error: function (data, status, e) // server response failure processing function

{

Alert (e );

}

})

Return false;

}

</Script>

 

4. Background page upload. aspx code

Protected void Page_Load (object sender, EventArgs e)

{

HttpFileCollection files = Request. Files;

String msg = string. Empty;

String error = string. Empty;

String imgurl;

If (files. Count> 0)

{

Files [0]. SaveAs (Server. MapPath (/) + System. IO. Path. GetFileName (files [0]. FileName ));

Msg = successful! File Size: + files [0]. ContentLength;

Imgurl =/+ files [0]. FileName;

String res = {error: '+ error +', msg: '+ msg +', imgurl: '+ imgurl + '};

Response. Write (res );

Response. End ();

}

}