devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【ExtJs】ExtJs的文件上传_extjs 上传文件

作者：从前慢现在也慢 | 2024-03-27 05:44:23

赞

踩

extjs 上传文件

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


一、基本目标

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



二、基本思想

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


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

  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的底部工作栏还是采用经典的左右空白站位符，中间放一个“确定”按钮的布局方式。此按钮在用户没有选择文件之间是不可用的。

  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识别：

//ExtJs收到此Json则认为上传成功
{  
"success":true,  
"msg":"ss" //要捎回前台的信息 
}
//ExtJs收到此Json则认为上传失败
{  
"success":false,  
"msg":"ss" //要捎回前台的信息
}
因此，便有了如下的php代码： 

  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. ?>


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/322141
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号