jQuery异步上传文件插件ajaxFileUpload详细介绍


Posted in Javascript onMay 19, 2015

一、ajaxFileUpload是一个异步上传文件的jQuery插件。

传一个不知道什么版本的上来,以后不用到处找了。

语法:$.ajaxFileUpload([options])

options参数说明:

1、url

  上传处理程序地址。

2,fileElementId

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

  是否启用安全提交,默认为false。
4,dataType

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

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

  提交失败自动执行的处理函数。
7,data 

  自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, 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是否一致或不存在
5,其它自定义错误

大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。

使用方法:

第一步:先引入jQuery与ajaxFileUpload插件。注意先后顺序,这个不用说了,所有的插件都是这样。

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

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

第二步:HTML代码:

<body>

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

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

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

</body>

第三步:JS代码
<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: '/upload.aspx', //用于文件上传的服务器端请求地址

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

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

                    dataType: 'json', //返回值类型 一般设置为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>

第四步:后台页面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();

            }

        }

本实例完整代码下载

来一个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代码,成功上传后,返回图片真实地址并绑定到<img>的SRC地址

<html>

<head>

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

                if ($("#file1").val().length > 0) {

                    ajaxFileUpload();

                }

                else {

                    alert("请选择图片");

                }

            })

        })

        function ajaxFileUpload() {

            $.ajaxFileUpload

            (

                {

                    url: '/Home/Upload', //用于文件上传的服务器端请求地址

                    secureuri: false, //一般设置为false

                    fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />

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

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

                    {

                        alert(data);

                        $("#img1").attr("src", data);

                        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>

</head>

<body>

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

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

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

</body>

</html>

 最后再来一个上传图片且附带参数的实例:控制器代码:

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视图代码:

<html>

<head>

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

                if ($("#file1").val().length > 0) {

                    ajaxFileUpload();

                }

                else {

                    alert("请选择图片");

                }

            })

        })

        function ajaxFileUpload() {

            $.ajaxFileUpload

            (

                {

                    url: '/Home/Upload', //用于文件上传的服务器端请求地址

                    type: 'post',

                    data: { Id: '123', name: 'lunis' }, //此参数非常严谨,写错一个引号都不行

                    secureuri: false, //一般设置为false

                    fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />

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

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

                    {

                        alert(data);

                        $("#img1").attr("src", data.imgPath1);

                        alert("你请求的Id是" + data.Id + "     " + "你请求的名字是:" + data.name);

                        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>

</head>

<body>

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

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

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

</body>

</html>

此实例在显示出异步上传图片的同时并弹出自定义传输的参数。本实例下载地址

2013年1月28日,今天调试过程中发现一个问题,就是作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的。如:正确的写法是<input type="file" id="file1" name="file1" />

2013年1月28日,最经典的错误终于找到原因所在了。Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError',这个是google浏览器报的错误,非常经典, 不知道是我的版本问题还是真正存在的问题。这个问题的根源经过N次上传才找到问题的根本所在。答案是:dataType参数一定要大写。如:dataType: 'HTML'。

Javascript 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 #Javascript
7个有用的jQuery代码片段分享
May 19 #Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 #Javascript
javascript检测两个数组是否相似
May 19 #Javascript
10条建议帮助你创建更好的jQuery插件
May 18 #Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 #Javascript
JQuery中层次选择器用法实例详解
May 18 #Javascript
You might like
优化PHP代码技巧的小结
2013/06/02 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php字符串过滤与替换小结
2015/01/26 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JS字符串截取函数实例
2013/12/27 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
python利用hook技术破解https的实例代码
2013/03/25 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python进行文件对比的方法
2018/12/24 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
数字漫画:comiXology
2020/06/13 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
消防先进事迹材料
2014/02/10 职场文书
2014植树节活动总结
2014/03/11 职场文书
应聘英语教师求职信
2014/04/24 职场文书
挂职学习心得体会
2014/09/09 职场文书
三好生演讲稿
2014/09/12 职场文书
临时租车协议范本
2014/09/23 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
廉政承诺书
2015/01/19 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
导游词之张家口
2019/12/13 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python