EasyUI 和 Uploadify 鱼和熊掌

凝望长空

EasyUI 和 Uploadify 鱼和熊掌

      Easyui还算不错的UI，很简单，但是不够Open！Uploadify很不错的基于jQuery文件上传的插件，漂亮的UI，支持多文件上传，等特性！当鱼遭遇熊掌会怎么样？



    最近的一个项目恰好碰到了这两样，一个奇怪的问题是Uploadify在IE中折腾死也不能实现上传，而且还不报错，真是郁闷，基于版本（uploadify 2.1.4），搜遍了网络资源都没有解决，可能我们处于的问题的状态不一样。于是先写了简单一个测试页面，发现在IE中是可以的，但是为什么碰到了EasyUI就不行了呢？



    对于JS的调试，就像我曾经的老大告诉我，你就删代码，知道他正常为止吧，虽说这是一个笨方法，但是还是很有效果的。就这样一行行的整理，终于找到了问题所在。我的页面结构是在EasyUI的DateGrid上面有一个添加的按扭，当点击添加时会弹出一个Form的div，发现如果不弹出这个框是没有问题的，我就猜测难道是EasyUI的#("#id").dialog(),方法有问题，



Js代码

1. 1.//添加  
   
2. 2.        function add() {  
   
3. 3.            clearForm();  
   
4. 4.            $("#updateForm").show();  
   
5. 5.            $('#updateForm').dialog({  
   
6. 6.                title:'添加折扣券',  
   
7. 7.                resizable:true  
   
8. 8.            });  
   
9. 9.        }  

复制代码

难道是动态的改变了DOM，会对Uploadify造成影响，我试着在dialog方法之后，去加载Uploadify发现在IE中可以使用。埃。这个问题终于摆脱纠结了。。。



Js代码

1. 1.//添加  
   
2. 2. function add() {  
   
3. 3.     clearForm();  
   
4. 4.     $("#updateForm").show();  
   
5. 5.     $('#updateForm').dialog({  
   
6. 6.         title:'添加折扣券',  
   
7. 7.         resizable:true  
   
8. 8.     });  
   
9. 9.  
   
10. 10.     //load uploadify  
    
11. 11.     loadUploadify();  
    
12. 12. }  
    
13. 13.  
    
14. 14. //load uploadify  
    
15. 15. function loadUploadify() {  
    
16. 16.     if (!isLoadUploadify) {  
    
17. 17.         $('#image').uploadify({  
    
18. 18.             'uploader'  : '../uploadify/uploadify.swf',  
    
19. 19.             'script'    : '${ctx}/image.do?action=save',  
    
20. 20.             'cancelImg' : '../uploadify/cancel.png',  
    
21. 21.             'folder'    : 'uploads',  
    
22. 22.             'buttonText': 'select images', //商品的图片  
    
23. 23.             'auto'      : false,  
    
24. 24.             'onComplete'  : function(event, ID, fileObj, response, data) {  
    
25. 25.                 $("#img").val(response);  
    
26. 26.             }  
    
27. 27.         });  
    
28. 28.     }  
    
29. 29.  
    
30. 30.     isLoadUploadify = true; //定义的全局变量，初始值为false为了解决重复加载Uploadify的问题。  
    
31. 31. }  

复制代码

冰释一片天

谢谢分享