Detailed introduction to jQuery asynchronous file upload plug-in ajaxFileUpload_jquery

1. ajaxFileUpload is a jQuery plug-in for asynchronously uploading files.

Upload a version I don’t know, so you don’t have to look for it everywhere in the future.

Syntax: $.ajaxFileUpload([options])

options parameter description:

1. url Upload handler address. ​
2. fileElementId　　　 The ID of the file field that needs to be uploaded, that is, the ID of .
3. secureuri Whether to enable secure submission, the default is false.
4. dataType The data type returned by the server. Can be xml, script, json, html. If you don't fill it in, jQuery will automatically determine it.
5. success is a processing function that is automatically executed after successful submission. The parameter data is the data returned by the server.
6. error A processing function that is automatically executed if the submission fails.
7. data Custom parameters. This thing is more useful. When there is data related to the uploaded image, this thing will be used.
8, type When you want to submit custom parameters, this parameter must be set to post

Error message:

1, SyntaxError: missing; before statement error
If this error occurs, you need to check whether the url path is accessible
2. SyntaxError: syntax error
If this error occurs, you need to check whether there is a syntax error in the server background handler that handles the submission operation
3. SyntaxError: invalid property id error
If this error occurs, you need to check whether the text field attribute ID exists
4. SyntaxError: 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 each parameter is correct, which is much more convenient than the invalid error prompts above.

Usage:

Step one: First introduce jQuery and ajaxFileUpload plug-ins. Pay attention to the order. Needless to say, this is the case for all plug-ins.

Copy code The code is as follows:

Step 2: HTML code:

Copy code The code is as follows:

Step 3: JS code

Copy code The code is as follows:

Step 4: Backend page upload.aspx code:

Copy 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 = " 成功! 文件大小为:" files[0].ContentLength;
                imgurl = "/" files[0].FileName;
                string res = "{ error:'" error "', msg:'" msg "',imgurl:'" imgurl "'}";
                Response.Write(res);
                Response.End();
            }
        }

本实例完整代码下载

来一个MVC版本的实例：

控制器代码

复制代码 代码如下:

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);
        }
    }

前端视图，HTML与JS代码，成功上传后，返回图片真实地址并绑定到的SRC地址

复制代码 代码如下:

Finally, here is another example of uploading images with parameters: controller code:

Copy code 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 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);
            }
//Be careful to write down 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:

Copy code The code is as follows:

This example displays the asynchronously uploaded image and pops up the custom transmission parameters at the same time. This example

Download address

On January 28, 2013, a problem was discovered during the debugging process today, that is, as a file field (), it must have a name attribute. If there is no name attribute, the server will obtain the Not pictured. For example: the correct way of writing is

On January 28, 2013, the cause of the most classic error was finally found. Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError'. This is an error reported by Google browser. It is very classic. I don’t know if it is my version problem or not. The real problem. The root cause of this problem was found after N uploads. The answer is: the dataType parameter must be in uppercase letters. For example: dataType: 'HTML'.