Specific method of using ajaxfileupload plug-in to achieve file upload without refreshing_javascript skills

I encountered such a problem when working on a project. If you use the ordinary ASP.NET FileUpload control to upload files, the page will be refreshed, and the elements spelled out with JS on the page will disappear. In order to upload files, you cannot Refresh the page, the ajaxfileupload plug-in is a good choice (plug-in download address: http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js)

ajaxfileupload is a plug-in for jQuery. When using this plug-in, you must also reference the jQuery.js file

Just go to the code

JS code

[javascript]

Copy code The code is as follows:

//Execute AJAX to upload files
$.ajaxFileUpload({
url: '/Web/Teacher/ImportAchievements.ashx',
secureuri: false,
fileElementId: 'fulAchievements',
dataType: 'json',
success: function (data, status) {
alert(data[0]);
}
});

//Execute AJAX to upload files
$.ajaxFileUpload({
url: '/Web/Teacher/ImportAchievements.ashx',
secureuri: false,
fileElementId: 'fulAchievements',
dataType: 'json',
success: function (data, status) {
alert(data[0]);
}
});

Description:

1. This method is very similar to the well-known $.ajax method

2. Parameter description

url: AJAX background code file, which needs to receive file data from the front desk

secureuri: Whether to encrypt uploaded files

fileElementId: The Id value of the upload control in HTML. It should be noted here that the background code receives data in the form of name-value, so the background code receives data through name. Receive data instead of Id (the fundamental reason is that this method will automatically generate a form and submit the form to the background code for processing).

dataType: data type, usually 'json'

success: callback function executed after successful upload

Code in ASP.NET general handler

[csharp]

Copy code The code is as follows:

public void ProcessRequest (HttpContext context ) {
context.Response.ContentType = "text/html";//This is very important. Although the front-end data type is json, html must be written here
//Get the file from the front-end
HttpFileCollection files = HttpContext.Current.Request.Files;
//Save the files in the website directory
files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls") );
//Return prompt expressed in json data format
string result = "[" """ "Scores imported successfully" """ "]";
context.Response.Write(result) ;

}

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/html";//This is very important. Although the front-end data type is json, html must be written here
// Get files from the front desk
HttpFileCollection files = HttpContext.Current.Request.Files;
//Save the files in the website directory
files[0].SaveAs(context.Server.MapPath("/ Web/uploadFiles/Achievements.xls"));
//Return prompt expressed in json data format
string result = "[" """ "Achievements imported successfully" """ "]";
context.Response.Write(result);

}

This implements AJAX uploading files, and the page will not refresh. Try it if necessary.