程序员人生 网站导航

jQuery插件之ajaxFileUpload详细解析

栏目:htmlcss时间:2015-01-18 10:37:18

功能:ajaxFileUpload是1个异步上传文件的jQuery插件

语法:$.ajaxFileUpload([options])

 

options参数说明:

    url                         上传处理程序地址。

    fileElementId   需要上传的文件域的ID,即<input type="file">的ID。

    secureuri      是不是启用安全提交,默许为false。

    dataType      服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。

    success      提交成功后自动履行的处理函数,参数data就是服务器返回的数据。

    error         提交失败自动履行的处理函数。

    data         自定义参数。这个东西比较有用,当有数据是与上传的图片相干的时候,这个东西就要用到了。

    type          当要提交自定义参数时,这个参数要设置成post。

 

毛病提示:

    1,SyntaxError: missing ; before statement毛病        如果出现这个毛病就需要检查url路径是不是可以访问

    2,SyntaxError: syntax error毛病    如果出现这个毛病就需要检查处理提交操作的服务器后台处理程序是不是存在语法毛病

    3,SyntaxError: invalid property id毛病    如果出现这个毛病就需要检查文本域属性ID是不是存在

    4,SyntaxError: missing } in XML expression毛病    如果出现这个毛病就需要检查文件name是不是1致或不存在

    5,其它自定义毛病    大家可以使用变量$error直接打印的方法检查各参数是不是正确,比起上面这些无效的毛病提示还是方便很多。

 

使用方法:

    1.先引入jQuery与ajaxFileUpload插件,注意前后顺序。

        <script src="jquery⑴.7.1.js" type="text/javascript"></script>

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

 

    2.HTML代码段

        <body>

            <p><input type="file" id="file1" name="file" /></p> 

            <input type="button" value="上传" /> 

            <p><img id="img1" alt="上传成功啦" src="" /></p>

        </body>

 

    3.js代码

        <script src="jquery⑴.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', //用于文件上传的服务器端要求地址

                    secureuri: false, //是不是需要安全协议,1般设置为false

                    fileElementId: 'file1', //文件上传域的ID

                    dataType: 'json', //返回值类型 1般设置为json

                    success: function (data, status)  //服务器成功响应处理函数 

                    {

                        $("#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)//服务器响应失败处理函数

                     {

                         alert(e);

                     }

               }) 

               return false;

        }

        </script>

 

    4.后台页面upload.aspx代码

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

            }

        }

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐