申明：来源http://blog.csdn.net/yongh701/article/details/45390975 ，博主：yongh701

版权声明：本文为博主原创文章，未经博主允许欢迎乱转载，标好作者就可以了！感谢欣赏！觉得好，回个贴就行！

ExtJs的文件上传也是采用Ajax的方式，基本上，用户上传之后，其结果马上推回给前台。下面以一个ExtJs图片上传系统，说明这个问题。

 

一、基本目标

实现如下的一个图片上传的系统，不是基本图片格式，大于1M的图片不给予上传，上传成功显示图片，上传不成功，则显示错误信息。

 

二、基本思想

这个工程的目录结构如下，

如FileUpload.html的HTML布局所示，js与ext-theme-classic下面皆是Ext的基本资源。然后Upload文件夹用来存放上传的图片，FileUpload.html就是前台布局页面，里面有一个直接渲染到<body>标签的Panel组件，Panel组件中，仅有一个文件域，相当于<input type="file" />。上传成功之后弹出一个可以关闭的窗口window。photoSubmit.php是上传文件的后台处理页面。

 

[html] view plain copy
 
 print?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.         <title>extFileUpload</title>  
  6.         <script type="text/javascript" src="../js/ext-all.js"></script>  
  7.         <script type="text/javascript" src="../js/bootstrap.js"></script>  
  8.         <script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>  
  9.         <link href="../ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">  
  10.     </head>  
  11.     <body>  
  12.     </body>  
  13. </html>  

三、制作过程

 

1、FileUpload.html

这个前台布局页面还是使用了表单最基本的anchor布局，然后利用了ExtJs的Ajax表单提交方式，这都在《【ExtJs】ExtJs的表单插件与表单布局、提交与验证》（点击打开链接）已经具体讲过。记住ExtJs文件域类型是filefield。此panel的底部工作栏还是采用经典的左右空白站位符，中间放一个“确定”按钮的布局方式。此按钮在用户没有选择文件之间是不可用的。

 

[javascript] view plain copy
 
 print?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.         <title>extFileUpload</title>  
  6.         <script type="text/javascript" src="js/ext-all.js"></script>  
  7.         <script type="text/javascript" src="js/bootstrap.js"></script>  
  8.         <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>  
  9.         <link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">  
  10.     </head>  
  11.     <body>  
  12.     </body>  
  13. </html>  
  14. <script>  
  15.     Ext.onReady(function(){  
  16.         Ext.onReady(function(){  
  17.             var form1 = Ext.create('Ext.form.Panel', {  
  18.                 renderTo: Ext.getBody(),  
  19.                 method: 'POST',  
  20.                 layout: 'anchor',  
  21.                 title: '图片上传',  
  22.                 items: [{  
  23.                     xtype: 'filefield',  
  24.                     anchor: '100%',  
  25.                     name: 'file',  //此文件传递给后台处理上传页面的标识  
  26.                     allowBlank: false, //不允许为空  
  27.                     buttonText: '选择图片' //那个上传按钮的文字  
  28.                 }],  
  29.                 bbar: [{  
  30.                     xtype: 'tbfill'  
  31.                 }, {  
  32.                     xtype: 'button',  
  33.                     text: '确定',  
  34.                     disabled: true, //没有通过验证，此按钮不可用  
  35.                     formBind: true,  
  36.                     listeners: {  
  37.                         click: function(){  
  38.                             var thisForm = form1.getForm();  
  39.                             thisForm.submit({  
  40.                                 url: "photoSubmit.php",  
  41.                                 success: function(form, action){  
  42.                                     Ext.create('Ext.window.Window', {  
  43.                                         title:'上传成功',  
  44.                                         border: false, //没有边框  
  45.                                         items: [{  
  46.                                             xtype: 'image',  
  47.                                             src: action.result.msg  
  48.                                         }]  
  49.                                     }).show();  
  50.                                 },  
  51.                                 failure: function(form, action){  
  52.                                     Ext.create('Ext.window.Window', {  
  53.                                         title: '上传失败',  
  54.                                         border: false, //没有边框  
  55.                                         items: [{  
  56.                                             xtype: 'label',                                           
  57.                                             text: action.result.msg  
  58.                                         }]  
  59.                                     }).show();  
  60.                                 }  
  61.                             });  
  62.                         }  
  63.                     }  
  64.                 }, {  
  65.                     xtype: 'tbfill'  
  66.                 }]  
  67.             });  
  68.         })  
  69.     });  
  70. </script>  
2、photoSubmit.php

 

ExtJs的上传与否取决与这个页面打印出来的Json信息。此页面与《【php】文件的上传与下载》（点击打开链接）的上传部分没有半点区别，使用Jsp的朋友可以参考，《【Servlet】利用Servlet3.0标准与JSTL表达式实现文件上传系统，支持图片上传后显示》（点击打开链接）；《【Struts2】文件的上传与上传权限的控制》（点击打开链接）；使用Asp或者.NET的朋友也是一样的，关键是你的后台页面处理完上传的文件之后，和《【ExtJs】ExtJs的表单插件与表单布局、提交与验证》（点击打开链接）一样，打印出如下的字符串让FileUpload.html识别：

 

[plain] view plain copy
 
 print?
  1. //ExtJs收到此Json则认为上传成功  
  2. {    
  3. "success":true,    
  4. "msg":"ss" //要捎回前台的信息   
  5. }  
  6. //ExtJs收到此Json则认为上传失败  
  7. {    
  8. "success":false,    
  9. "msg":"ss" //要捎回前台的信息  
  10. }    
因此，便有了如下的php代码：

 

 

[php] view plain copy
 
 print?
  1. <?php    
  2. //看是否是通过正常途径传递一个file过来了    
  3. if(empty($_FILES["file"])){    
  4.     //如果不是，则是非正常打开此页，马上重定向，伪装这页不存在  
  5.     header("location: error.php");    
  6.     exit;    
  7. }    
  8. else{    
  9.     header("Content-type: text/html; charset=utf-8");    
  10. }    
  11. //这是判断是否上传的file    
  12. $canUpload=true;    
  13. //这样就能够取得上传的文件名    
  14. $fileName=$_FILES["file"]["name"];    
  15. //通过对$fileName的处理，就能够取得上传的文件的后缀名    
  16. $fileExtensions=strrchr($fileName, '.');    
  17. //这样就能够取得上传文件的大小    
  18. $fileSize=$_FILES["file"]["size"];    
  19. //即将被打印的错误信息    
  20. $errmsg="";    
  21.     
  22. //这里是文件的异常，一般不会出现    
  23. if($_FILES["file"]["error"]>0){    
  24.     $errmsg .= "异常：".$_FILES["file"]["error"]."！";    
  25.     $canUpload=false;    
  26. }    
  27.     
  28. //如果上传的文件名的后缀不是以下的几种则不能上传    
  29. if($fileExtensions!=".bmp" && $fileExtensions!=".gif" && $fileExtensions!=".jpg" && $fileExtensions!=".jpeg" && $fileExtensions!=".png"){    
  30.     $errmsg .= "只能上传图片类型！后缀名必须为：.bmp,gif,jpg,jpeg,png任一！";    
  31.     $canUpload=false;    
  32. }    
  33.     
  34. //如果上传的文件大于1M则也不能上传    
  35. if($fileSize>1*1024*1024){    
  36.     $errmsg .= "文件太大！请少于1M！";    
  37.     $canUpload=false;    
  38. }    
  39.     
  40. //如果文件可以上传    
  41. if($canUpload==true){    
  42.     //保存在服务器的名字则是时间戳，加文件后缀名    
  43.     $saveName=time().$fileExtensions;    
  44.     //取得服务器的目录的绝对路径。    
  45.     $basepath=str_replace('\\','/',realpath(dirname(__FILE__).'/'))."/";    
  46.     //然后则保存这个上传文件    
  47.     move_uploaded_file($_FILES["file"]["tmp_name"],$basepath."/upload/".$saveName);  
  48.     //打印上传成功之后的json给正在等待的ExtJsAjax，捎一个图片的保存地址给它。正常来说，这个地址还应该入库。  
  49.     echo "{  
  50.     'success':true,  
  51.     'msg':'upload/{$saveName}'  
  52.     }";  
  53. }    
  54. else{  
  55.     //上传不成功，则捎一个失败信息给前台。  
  56.     echo "{  
  57.     'success':false,  
  58.     'msg':'{$errmsg}'  
  59.     }";   
  60. }      
  61.     
  62. ?>