jQuery plug-in ajaxFileUpload-JS Tutorial-php.cn

jQuery plug-in ajaxFileUpload

黄舟

Release： 2016-12-13 11:41:22

Original

987 people have browsed it

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 .
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>

Copy after login

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>

Copy after login

Step 3: JS code

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

Copy after login

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

Copy after login

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

Copy after login

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



    
    
    


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

Copy after login

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

Copy after login

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>

Copy after login

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