JQuery asynchronous file upload plug-in ajaxFileUpload details
This article mainly introduces the jQuery asynchronous file upload plug-in ajaxFileUpload in detail. This article first describes the ajaxFileUpload parameters, error prompts, and other knowledge, and then provides simple examples and ASP.. net mvc mode. For more information, see.
1. ajaxFileUpload is a jQuery plug-in for asynchronous file upload.
Upload a version that you don't know, so you don't need to find it in the future.
Syntax: $. ajaxFileUpload ([options])
Options parameter description:
1. url upload handler address.
2. the ID of the file field to be uploaded by fileElementId, that is, the ID of <input type = "file">.
3. Whether secureuri enables secure submission. The default value is false.
4. 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.
5. The processing function automatically executed after successful submission of success. The parameter data is the data returned by the server.
6. The processing function automatically executed when the error is submitted.
7. Custom data parameters. This is useful when data is related to uploaded images.
8. If 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. 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:
Step 1: Introduce jQuery and ajaxFileUpload plug-ins first. Pay attention to the order. Needless to say, this applies to all plug-ins.
The Code is as follows:
<Script src = "jquery-1.7.1.js" type = "text/javascript"> </script>
<Script src = "ajaxfileupload. js" type = "text/javascript"> </script>
Step 2: HTML code:
The Code is as follows:
<Body>
<P> <input type = "file" id = "file1" name = "file"/> </p>
<Input type = "button" value = "Upload"/>
<P> </p>
</Body>
Step 3: JS Code
The Code is as follows:
<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>
Step 4: backend page upload. aspx code:
The Code is as follows:
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 ();
}
}
Here is an example of an MVC version:
Controller code
The Code is as follows:
Public class HomeController: Controller
{
Public ActionResult Index ()
{
Return View ();
}
Public ActionResult Upload ()
{
HttpFileCollection HFCs = System. Web. HttpContext. Current. Request. Files;
String imgPath = "";
If (hfc-count> 0)
{
ImgPath = "/testUpload" + hfc[ 0]. FileName;
String PhysicalPath = Server. MapPath (imgPath );
HFCs [0]. SaveAs (PhysicalPath );
}
Return Content (imgPath );
}
}
Front-end view, HTML and JS Code. After the image is uploaded successfully, return the actual image address and bind it to the SRC address of .
The Code is as follows:
<Html>
<Head>
<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 (){
If ($ ("# file1"). val (). length> 0 ){
AjaxFileUpload ();
}
Else {
Alert ("select image ");
}
})
})
Function ajaxFileUpload (){
$. AjaxFileUpload
(
{
Url: '/Home/upload', // server-side request address used for File Upload
Secureuri: false, // this parameter is generally set to false.
FileElementId: 'file1', // id attribute of the file upload space <input type = "file" id = "file" name = "file"/>
DataType: 'html ', // the return value type is generally set to json
Success: function (data, status) // the server responds to the processing function successfully.
{
Alert (data );
$ ("# Img1"). attr ("src", data );
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>
</Head>
<Body>
<P> <input type = "file" id = "file1" name = "file"/> </p>
<Input type = "button" value = "Upload"/>
<P> </p>
</Body>
</Html>
The Controller code is as follows:
The Code is as follows:
Public class HomeController: Controller
{
Public ActionResult Index ()
{
Return View ();
}
Public ActionResult Upload ()
{
NameValueCollection nvc = System. Web. HttpContext. Current. Request. Form;
HttpFileCollection HFCs = System. Web. HttpContext. Current. Request. Files;
String imgPath = "";
If (hfc-count> 0)
{
ImgPath = "/testUpload" + hfc[ 0]. FileName;
String PhysicalPath = Server. MapPath (imgPath );
HFCs [0]. SaveAs (PhysicalPath );
}
// Be sure to write the second and third parameters.
Return Json (new {Id = nvc. get ("Id"), name = nvc. get ("name"), imgPath1 = imgPath}, "text/html", JsonRequestBehavior. allowGet );
}
}
Index view code:
The Code is as follows:
<Html>
<Head>
<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 (){
If ($ ("# file1"). val (). length> 0 ){
AjaxFileUpload ();
}
Else {
Alert ("select image ");
}
})
})
Function ajaxFileUpload (){
$. AjaxFileUpload
(
{
Url: '/Home/upload', // server-side request address used for File Upload
Type: 'post ',
Data: {Id: '000000', name: 'lunis '}, // this parameter is very rigorous and cannot be written into an incorrect quotation mark.
Secureuri: false, // this parameter is generally set to false.
FileElementId: 'file1', // id attribute of the file upload space <input type = "file" id = "file" name = "file"/>
DataType: 'json', // the return value type is generally set to json
Success: function (data, status) // the server responds to the processing function successfully.
{
Alert (data );
$ ("# Img1"). attr ("src", data. imgPath1 );
Alert ("your request Id is" + data. Id + "" + "your request name is:" + data. name );
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>
</Head>
<Body>
<P> <input type = "file" id = "file1" name = "file"/> </p>
<Input type = "button" value = "Upload"/>
<P> </p>
</Body>
</Html>
This instance displays the asynchronous upload of images and displays custom transmission parameters.
On July 6, January 28, 2013, a problem was found during the debugging process today, that is, the file field (<input type = "file">) must have the name attribute. If no name attribute exists, after uploading, the server cannot obtain the image. For example, the correct syntax is <input type = "file" id = "file1" name = "file1"/>
In January 28, 2013, the most classic error finally found the cause. Object function (a, B) {return new e. fn. init (a, B, h)} has no method 'handleerror'. This is an error reported by google. It is very classic. I don't know whether it is my version or a real problem. The root cause of this problem is found after N uploads. The answer is: the dataType parameter must be capitalized. For example, dataType: 'html '.