Shulou(Shulou.com)06/02 Report--

This article mainly explains "asp.net how to use the ajaxFileUpload plug-in to upload files", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "asp.net how to use the ajaxFileUpload plug-in to upload files" bar!

AjaxFileUpload.js has many people of the same name, because it's easy to make one.

AjaxFileUpload.js is not a very famous plug-in, but someone else wrote it and put it out for everyone to use. The principle is to create hidden forms and iframe and then submit them with JS to get the return value.

I did an asynchronous upload function and chose it because its configuration is more like jQuery's AJAX. I like it very much.

What's said in the comments is no good. That's because we don't use the same js. I searched AjaxFileUpload on github and found a lot of similar js.

AjaxFileUpload is a jQuery plug-in for asynchronously uploading files.

I don't know what version to send up, so you don't have to look everywhere anymore.

Syntax: $.ajaxFileUpload ([options])

Options parameter description:

1. The address of url upload handler.

2Die fileElementId requires the ID of the file domain to be uploaded, namely ID.

3 whether secure submission is enabled for Secureuri. Default is false.

4data type returned by the dataType server. Can be xml,script,json,html. If you do not fill in, jQuery will automatically judge.

5The processing function that is automatically executed after the successful submission is completed. The parameter data is the data returned by the server.

6The handle function that failed to be automatically executed when the error was submitted.

7Custom parameters for data. This thing is more useful, when there is data related to the uploaded picture, this thing will be used.

8, type when you want to submit a custom parameter, this parameter should be set to post

Error prompt:

1SyntaxError: missing; before statement error

If this error occurs, you need to check whether the url path is accessible.

2SyntaxError: syntax error error

If this error occurs, you need to check whether there are syntax errors in the server daemon that handles the commit operation.

3SyntaxError: invalid property id error

If this error occurs, you need to check whether the text field property ID exists.

4SyntaxError: missing} in XML expression error

If this error occurs, you need to check whether the file name is consistent or does not exist.

5. Other custom errors

You can use the variable $error to print directly to check whether the parameters are correct, which is much more convenient than the invalid error tips above.

How to use it:

Step 1: introduce jQuery and ajaxFileUpload plug-ins first. Pay attention to the order, needless to say, all plug-ins are like this.

Step 2: HTML code:

Step 3: JS code

$(function () {$(": button") .click (function () {ajaxFileUpload ()) })}) function ajaxFileUpload () {$.ajaxFileUpload ({url:'/ upload.aspx', / / the server-side request address for file upload secureuri: false, / / whether a security protocol is required Generally set to false fileElementId: 'file1', / / ID dataType in the file upload domain:' json', / / the return value type is generally set to json success: function (data, status) / / Server successful response handler function {$("# 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 handler {alert (e) }}) return false;}

Step 4: upload.aspx code of the background page:

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 = "success! File size is: "+ files [0] .ContentLength; imgurl =" / "+ files [0] .filename; string res =" {error:' "+ error +"', msg:' "+ msg +"', imgurl:' "+ imgurl +"'} "; Response.Write (res); Response.End ();}}

Download the complete code for this example

Give an example of the MVC version:

Controller code

Public class HomeController: Controller {public ActionResult Index () {return View ();} public ActionResult Upload () {HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; string imgPath = ""; if (hfc.Count > 0) {imgPath = "/ testUpload" + hfc [0] .filename String PhysicalPath = Server.MapPath (imgPath); hfc [0] .SaveAs (PhysicalPath);} return Content (imgPath);}}

Front-end view, HTML and JS code. After uploading successfully, return the real address of the image and bind it to

The SRC address of

$(function () {$(": button") .click (function () {if ($("# file1"). Val (). Length > 0) {ajaxFileUpload ();} else {alert ("Please select a picture") }})}) function ajaxFileUpload () {$.ajaxFileUpload ({url:'/ Home/Upload', / / server-side request address for file upload secureuri: false / / generally set to false fileElementId: 'file1', / / id attribute of file upload space dataType:' HTML', / / return value type is generally set to json success: function (data, status) / / Server successful response handler function {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 handler {alert (e) }}) return false;}

Finally, let's give an example of uploading an image with parameters: controller code:

Public class HomeController: Controller {public ActionResult Index () {return View ();} public ActionResult Upload () {NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form; HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; string imgPath = "" If (hfc.Count > 0) {imgPath = "/ testUpload" + hfc [0] .filename; string PhysicalPath = Server.MapPath (imgPath); hfc [0] .SaveAs (PhysicalPath) } / / Note to write the second and third parameter return Json (new {Id = nvc.Get ("Id"), name = nvc.Get ("name"), imgPath2 = imgPath}, "text/html", JsonRequestBehavior.AllowGet);}}

Index view code:

$(function () {$(": button") .click (function () {if ($("# file1"). Val (). Length > 0) {ajaxFileUpload ();} else {alert ("Please select a picture") }})}) function ajaxFileUpload () {$.ajaxFileUpload ({url:'/ Home/Upload', / / server-side request address for file upload type: 'post' Data: {Id: '123, name:' lunis'}, / / this parameter is very strict Secureuri: false, / / generally set to false fileElementId: 'file1', / / the id attribute of the file upload space dataType:' json', / / return value type is generally set to json success: function (data) Status) / / Server response handler {alert (data) $("# img1"). Attr ("src", data.imgPath2); alert ("the Id you requested is" + data.Id + "" + "the name of your request 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 handler {alert (e) }}) return false;}

This example shows that the picture is uploaded asynchronously and the parameters of the custom transfer are popped up. Download address of this example

A problem found during debugging today is that as a file field () must have a name attribute. If there is no name attribute, the server will not be able to get the image after upload. The correct way to write it is

The reason for the most classic mistake has finally been found. Object function (AMagneb) {return new e.fn.init (ASCHI)} has no method 'handleError', this is an error reported by the google browser. It's a classic. I don't know if it's my version problem or a real problem. The root of the problem took N uploads to find the root of the problem. The answer is: the dataType parameter must be capitalized. Such as: dataType: 'HTML'.

Thank you for your reading, the above is the content of "asp.net how to use the ajaxFileUpload plug-in to upload files". After the study of this article, I believe you have a deeper understanding of how asp.net uses the ajaxFileUpload plug-in to upload files, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.