文档章节

jQuery插件之ajaxFileUpload上传文件

1024菜bird
 1024菜bird
发布于 2016/12/01 15:24
字数 985
阅读 108
收藏 2

ajaxFileUpload.js 很多同名的,因为做出来一个很容易。

我用的是这个:https://github.com/carlcarl/AjaxFileUpload

下载地址在这里:http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar

AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。

异步上传的功能,选择它因为它的配置方式比较像jQuery的AJAX

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直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。

使用方法:mvc例子附带参数上传

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

后台代码:省略。。。

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

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

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

评论中的一个错误:TypeError: $.ajaxFileUpload is not a function   我们用的不是同一个JS,你下了别的AJAXFileUpload去了。

© 著作权归作者所有

共有 人打赏支持
1024菜bird
粉丝 75
博文 141
码字总数 138266
作品 0
海淀
程序员
jQuery插件AjaxFileUpload实现ajax文件上传

1、引入AjaxFileUpload插件相关的js <script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script><script type="text/javascript" src="<%=basePath%>resou......

刘yu
2015/04/22
0
0
针对IE 安全问题file无法上传的问题 ajaxFileUpload

<!doctype html><html><head><meta charset="UTF-8"><title>Document</title><style>.wrap{background: gray;width: 100px;height: 30px;overflow: hidden;/关键属性/position: relative;}.b......

无头骑士
2015/01/30
0
2
简单的jQuery插件ajaxfileupload实现ajax上传文件例子

页面代码: <html> <!-- 引入相关的js文件,相对路径 --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/ajaxfileupload.js"></sc......

清华漏子
2014/07/13
0
0
10个免费的javascript富文本编辑器(jQuery and non-jQuery)

祝愿园子里的朋友圣诞节快乐。 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascript富文本编辑器使我们添...

老鸟的空间
2014/07/05
0
1
ajaxFileUpload.js

ajaxFileUpload.js和jquery版本有对应关系,一般不支持大于等于1.8的jquery版本 问题1:如楼主所说,jQuery.handleError is not a function 原因是,经测试handlerError只在jquery-1.4.2之前...

chem_dev
2015/08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
47
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
42
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
47
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
42
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
47
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部