今天有个功能需要上传附件,又开始捡起几个月前已经放弃的jquery file upload 插件。
加载页面的时候,上传模块的三个按钮的颜色居然没了:
正常情况下,三个按钮分别是绿色、蓝色、橙色。
然后浏览器控制台报错:
Cannot read property 'nodeName' of undefined
这个jquery file upload 插件,由一系列javascript文件组成,是个比较复杂的内容,一不小心就容易出错。根据之前反复折腾的经验来看,这很明显是页面UI的问题。
推测又是js加载的顺序不对,导致有的内容无法被读取,然后看看几个关于UI的js是怎样引用的:
<script type="text/javascript" src="js/lib/jquery/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/lib/jquery/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="js/lib/jquery/jquery.fileupload.js"></script>
<script type="text/javascript" src="js/lib/jquery/jquery.fileupload-jquery-ui.js"></script>
这里,jquery.fileupload.js这个本插件的主力队员,排在了jquery.fileupload-jquery-ui.js 这个打扮外表的队员之前,那么,问题就在这里,装扮外表的那些组件还没出场,难道叫主力队员光着身子上场?
于是调整一下这两个队员的出场顺序:
<script type="text/javascript" src="js/lib/jquery/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/lib/jquery/jquery.fileupload-jquery-ui.js"></script>
<script type="text/javascript" src="js/lib/jquery/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="js/lib/jquery/jquery.fileupload.js"></script>
然后刷新页面:问题解决~