jQuery plug-in ajaxFileUpload-PHP开发-php.cn

jQuery plug-in ajaxFileUpload

高洛峰

Release： 2016-12-12 17:29:27

Original

1658 people have browsed it

ajaxFileUpload.js There are many names with the same name, because it is easy to make one.

I use this: https://github.com/carlcarl/AjaxFileUpload

The download address is here: http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar

AjaxFileUpload.js is not A very famous plug-in, it is just written by others and released for everyone to use. The principle is to create hidden forms and iframes and then use JS to submit them and get the return value.

I originally made an asynchronous upload function and chose it because its configuration method is more like jQuery's AJAX, which I like very much.

What’s said in the comments doesn’t work. That's because we are not using the same js. I searched AjaxFileUpload on github and found a lot of similar js.

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.

Usage:

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>
    <script type="text/javascript">
        $(function () {
            $(":button").click(function () {
                ajaxFileUpload();
            })
        })
        function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: &#39;/upload.aspx&#39;, //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: &#39;file1&#39;, //文件上传域的ID
                    dataType: &#39;json&#39;, //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        $("#img1").attr("src", data.imgurl);
                        if (typeof (data.error) != &#39;undefined&#39;) {
                            if (data.error != &#39;&#39;) {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
            return false;
        }
    </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