Ajaxfileupload of jquery Plugins

Last Update:2014-08-12 Source: Internet

Author: User

Tags httpcontext

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

Ajaxfileupload is a jquery plugin that uploads files asynchronously.

Pass a don't know what version of Come up, later don't have to look everywhere.

Syntax: $.ajaxfileupload ([options])

Options parameter Description:

1, URL upload handler address.
2,fileelementid the ID of the file domain that needs to be uploaded, which is the ID of <input type= "file" >.
3,secureuri whether secure commits are enabled, false by default.
4,datatype the data type returned by the server. Can be a xml,script,json,html. If you do not fill in, jquery will automatically determine.
5,success the processing function that is executed automatically after the commit succeeds, the parameter data is the server return.
6,error the processing function that failed to submit the automatic execution.
7,data custom parameters. This thing is more useful, when the data is related to the uploaded image, this thing will be used.
8, type when you want to submit a custom parameter, this parameter is set to post

Error message:

1,syntaxerror:missing; Before statement error
If this error occurs, you will need to check if the URL path is accessible
2,syntaxerror:syntax Error errors
If this error occurs, you need to check the server spooler that handles the commit operation for any syntax errors
3,syntaxerror:invalid Property ID Error
If this error occurs, you need to check whether the Text field property ID exists
4,syntaxerror:missing} in XML expression error
If this error occurs, you need to check whether the file name is consistent or not present.
5, other custom errors
You can use the variable $error Direct printing method to check whether the parameters are correct, compared to the above these invalid error prompts are much more convenient.

How to use:

First step: Introduce jquery and Ajaxfileupload plugins first. Note the sequencing, this needless to say, all the plugins are like this.

    <script src= "Jquery-1.7.1.js" type= "Text/javascript" ></script>    <script src= "Ajaxfileupload.js" Type= "Text/javascript" ></script>

Step Two: HTML code:

<body>    <p><input type= "file" id= "file1" name= "file"/></p>    <input type= "button" value= "Upload"/>    <p></p></body>

Step Three: 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 for file upload Secureuri:false,//Whether a security protocol is required, generally set to false fi Leelementid: ' file1 ',//File upload domain ID dataType: ' JSON ',//return value type is generally set to JSON success:functi                        On (data, status)//server successfully responds to handler {$ ("#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; } </script>

Fourth Step: 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 = "Success!" The file size is: "+ files[0]. ContentLength;                Imgurl = "/" + files[0]. FileName;                string res = "{error: '" + Error + "', msg: '" + msg + "', Imgurl: '" + Imgurl + "'}";                Response.Write (res);                Response.End ();            }        }

Full code download for this example

To an example of an 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 view, HTML and JS code, after successful upload, return the picture real address and bind to SRC address

Zhu

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