文档章节

jQuery插件之ajaxFileUpload上传文件

1024菜bird
 1024菜bird
发布于 2016/12/01 15:24
字数 985
阅读 120
收藏 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
ajaxFileUpload.js 使用报错

按照网上写的配置了ajaxFileUpload ,但是一点上传按钮就报错:TypeError: $.ajaxFileUpload is not a function function ajaxFileUpload(){ $("#loading").ajaxStart(function(){ $(this).......

menxin
2014/02/19
4.8K
5
DWZ中怎样整合JQuery的ajaxFileUpload上传插件

DWZ中怎样整合JQuery的ajaxFileUpload上传插件, dwz.ui.js中怎么写。。有没有做过的。

碧海云天
2013/12/18
354
0
jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

由于对jquery不了解,想请教各位在jsp中的struts2框架下 怎么使用jquery的插件ajaxfileupload 实现图片的异步上传,求个简单的实例源码。 jsp中的JS代码怎么写?...

碧海云天
2011/03/08
22.2K
13
请教一下ajax怎么跨域上传图片

我使用了 Ajax Upload 以及 jquery file upload 都提示无法跨域进行上传,使用了ajaxFileUpload 文件能上传,但是总是进error里面 进不到success里面....

菜鸟中的小公鸡
2015/09/19
550
1

没有更多内容

加载失败,请刷新页面

加载更多

Kylin2.5.0环境搭建及操作记录

Apache Kylin是一个开源的分布式分析引擎,提供Hadoop/Spark之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay Inc. 开发并贡献至开源社区。它能在亚秒内查询巨大的H...

PeakFang-BOK
10分钟前
0
0
SpringBoot整合es

文档对像 @Document(indexName = "bigdata",type = "tag")public class User { @Idprivate String openid; private List<String> tags;public String getOpenid() ......

魔法王者安琪拉
14分钟前
0
0
windows下让 jar 在后台运行的办法

windows下 运行 java jar 不出现 命令行 窗口 新建一个披处理 run.bat,内容如下 @echo off start javaw -jar xx.jar exit 双击运行即可。...

glen_xu
23分钟前
4
0
jdk1.8 lambda stream 指定的对象属性进行去重

原因:因为Stream提供的distinct()方法只能去除重复的对象,无法根据指定的对象属性进行去重,可以应付简单场景。 解决方案: //去重,共同信息保存到bizPledgeSupplierVOs里bizPledgeSupp...

INSISTQIAO
25分钟前
0
0
vue nextTick深入理解---vue性能优化、DOM更新时机、事件循环机制

定义[nextTick、事件循环] nextTick的由来: 由于vue的数据驱动视图更新是异步的,即修改数据的当下,视图不会立即更新,而是等同一事件循环中的所有数据变化完成之后再统一进行视图更新。...

JamesView
33分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部