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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
vue3.0 上手体验
Sep 21 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
输入N,打印N*N矩阵
2012/02/20 面试题
社区工作感言
2014/02/21 职场文书
劲霸男装广告词
2014/03/21 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers