Home >Web Front-end >JS Tutorial >jQuery plug-in ajaxFileUpload

jQuery plug-in ajaxFileUpload

黄舟Original: 2016-12-13 11:41:22989browse

ajaxFileUpload is a jQuery plug-in for asynchronous file upload

Upload a version you 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 3525558f8f338d4ea90ebf22e5cde2bc.
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 It is a processing function that is automatically executed after successful submission. The parameter data is the data returned by the server.
6, error　　　 Handling function that is automatically executed when 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 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Error prompt:

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 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 does not exist
5, other custom errors
You can use the variable $error to print directly to check whether each parameter is correct. Compared with The above invalid error prompts are still much more convenient.

How to use:

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

<script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>

Step 2: HTML code:

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

Step 3: JS code

<script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>

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

Let’s take 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 successful upload, return the real address of the image and bind it to the SRC address of a1f02c36ba31691bcfe87b2722de723b



    
    
    

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

Finally, here is 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);
            }
            //注意要写好后面的第二第三个参数
            return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
        }
    }

Index View code:



    
    
    

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief discussion on comprehensive control of js keyboard eventsNext article：A brief discussion on comprehensive control of js keyboard events

See more

jQuery plug-in ajaxFileUpload

Related articles