jquery ajaxFileUpload is not a function是什么原因

JavaScript011

jquery ajaxFileUpload is not a function是什么原因,第1张

报错信息

Uncaught TypeError:$.ajaxFileUpload is not a function 

大意就是,ajaxFileUpload这个函数未定义

错误背景

我使用了ajaxFileUpload这个js来实现不借助form表单的不刷新页面提交文件的功能(但是其实这个js内部还是用的是form表单提交的233,伪ajax,和jQuery ajax是不一样的)。 

在找了一个ajaxfileupload.js下载引用并且写好上传代码之后,一直报这个错误,我打开控制台看了一下,ajaxfileupload.js是引用成功的,可以在控制台打开,在其中可以看到ajaxFileUpload这个函数是定义了的,但是不管重启服务器多少次,都会报这个错误。然后开始各种查资料,开始看大家所说,以为是ajaxfileupload.js这个文件本身的问题,然后我去github下载了fork最多的那个,替换之前下的那个,还是不对,又在不同的几个地方找了几个不同版本的ajaxfileupload.js都试了试,仍旧是这个错误。然后看网上资料说与jquery.min.js也有关,因为我使用了Bootstap,所以jquery.min.js是之前导入的有的,怀疑是这个js版本导致的错误,我又试了几个不同版本的jquery.min.js,然而并无卵用。 

最后,终于在一个不起眼的小旮旯里找到了一个说法:js引用版本冲突可能会导致这种错误,后来又在CSDN问答里看到了一个人也是遇到这种错误,说与include有关,最后仔细看include才找到了真正导致这个错误的原因。

解决方法

首先,我们需要明确几个前提(别人的博客里基本都讲过这些啦,但感觉还是有必要说一下):

确认你使用的ajaxfileupload.js不是不知道从哪里搞来的可用性待商榷的。 

因为这个js较简单很多人是自己写的,所以可能有很多不是普遍使用的版本。我在这里给出我使用的js。点我下载

确定你导入了jquery.min.js和ajaxfileupload.js这两个js,并且路径没有问题,并且jquery.js在ajaxfileupload.js之前导入。 

如果因为路径错误或者配置错误什么的导致js没有成功导入上述两个js那就是别的地方有错误。判断自己是否成功导入js很简单,用开发人员工具看一下对应的js是否能打开,或者刷新一下页面在network里面看一下js文件的http请求状态,200或者304表示导入成功(这两个状态的不同可以自己百度,但是都表示成功)。

以上两点确认之后,那么重点就来了,你要看一下你的页面中有几个导入的jquery.min.js和ajaxfileupload.js,如果确保本页面这两个js都导入了一次,那么,你应该是使用了include标签,如果你在include标签里面导入了jquery.min.js或者ajaxFileUpload.js的话,浏览器就会因为在同一个页面中导入了两个同名的js而不知道该用哪一个(尽管导入的是同一个js文件!),所以干脆就不用了。。。然后就会报上述错误了,确保你所有的include以及iframe子页面里面没有导入其它jquery.min.js,那么这时就应该已经解决这个错误了。

我习惯用jquery,所以只能给你个jquery里的问题解决办法

因为ajax请求回来的对象都是后期加入的,而html只在加载时候执行一次,所以需要在执行事件的父级上去加绑定事件

如:

$('body').on('click' , '.zan' , function(){

//do something ...

})

$('body')范围比较大,但只要保证除了要实现效果的地方以外没有.zan这个类的元素就可以,当然也可以缩小范围;

.on就是事件的绑定方法,根据jquery版本不同会有点变化;

click是事件触发动作,你的应该就是点击;

.zan是触发的元素,这里表示class为zan的元素,可以根据你自己需要改动

以上办法供你参考

目前来看,JS框架以及一些开发包和库类有如下几个,Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx

Dojo (JS library and UI component ):

Dojo是目前最为强大的j s框架,它在自己的Wiki上给自己下了一个定义,dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的 工具箱,不仅仅是浏览器层面的,野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API,包括了JS本身的语言扩展,以及各个方面的工具类库,和比较完善的UI组件库,也被广泛 应用在很多项目中,他的UI组件的特点是通过给html标签增加tag的方式进行扩展,而不是通过写JS来生成,dojo的API模仿Java类库的组织 方式。 用dojo写Web OS可谓非常方便。dojo现在已经4.0了,dojo强大的地方在于界面和特效的封装,可以让开发者快速构建一些兼容标准的界面。

优点:库相当完善,发展时间也比较长,功能强大,据说利用dojo的io.bind()可以实现comet,看见其功能强大非一般,得到IBM和SUN的支持

缺点:文件体积比较大,200多KB,初次下载相当慢,此外,dojo的类库使用显得不是那么易用,j s语法增强方面不如prototype。

Prototype (JS OO library):

是一个非常优雅的JS库,定义了JS的面向对象扩展,DOM操作API,事件等等,以prototype为核心,形成了一个外围的各种各样 的JS扩展库,是相当有前途的JS底层框架,值得推荐,感觉也是现实中应用最广的库类(RoR集成的AJAX JS库),之上还有 Scriptaculous 实现一些JS组件功能和效果。

优点:基本底层,易学易用,甚至是其他一些js特效开发包的底层,体积算是最小的了。

缺点:如果说缺点,可能就是功能是他的弱项

Scriptaculous (JS UI component based on prototype):

Scriptaculous是基于prototype.js框架的JS效果。包含了6个js文件,不同的文件对应不同的js效果,所以说,如果底层用 prototype的话,做js效果用Scriptaculous那是再合适不过的了,连大名鼎鼎的digg都在用他,可见不一般

优点:基于prototype是最大的优点,由于使用prototype的广泛性,无疑对用户书锦上添花,并且在《ajax in action》中就拿Scriptaculous来讲述js效果

缺点:刚刚兴起,需要时间的磨练

yui-ext (JS UI component):

基于Yahoo UI的扩展包yui-ext是具有CS风格的Web用户界面组件 能实现复杂的Layout布局,界面效果可以和backbase媲美,而且使用纯javascript代码开发。真正的可编辑的表格Edit Grid,支持XML和Json数据类型,直接可以迁入grid。许多组件实现了对数据源的支持,例如动态的布局,可编辑的表格控件,动态加载的Tree 控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作,推出基于jQuery的Ext 1.0,提供了更多有趣的功能。

优点:结构化,类似于java的结构,清晰明了,底层用到了Jquery的一些函数,使整合使用有了选择,最重要的一点是界面太让让人震撼了。

缺点:太过复杂,整个界面的构造过于复杂。

Jquery :

jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!并且简介的语法和高的效率一直是jQuery追求的目标,

优点:注重简介和高效,js效果有yui-ext的选择,因为yui-ext 重用了很多jQuery的函数

缺点:据说太嫩,历史不悠久。

Mochikit :

MochiKit自称为一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发,另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便,能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML 文档定制的,如果与 MochiKit 和 Ajax 结合在一起,使用 XHTML 包装的微格式尤其方便。Mochikit可以直接对字符串或者数字格式化输出,比较实用和方便。它还有自己的 js 代码解释器

优点:MochiKit.DOM这部分很实用,简介也是很突出的

缺点:轻量级的缺点

mootools :

MooTools是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似,语法几乎一样。但它提供的功能要比prototypejs多,而且更强大。比如增加了动画特效、拖放操作等等。

优点:可以定制自己所需要的功能,可以说是prototypejs的增强版。

缺点:不大不小,具体应用具体分析

moo.fx :

moo.fx是一个超级轻量级的javascript特效库(7k),能够与prototype.js或mootools框架一起使用。它非常快、易于使用、跨浏览器、符合标准,提供控制和修改任何HTML元素的CSS属性,包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计,所以可以在它的基础上开发你需要的任何特效。

优点:小块头有大能耐

缺点:这么小了,已经不错了