ExtJs的文件上传也是采取AJAX的方式，基本上，用户上传以后，其结果马上推回给前台。下面以1个ExtJs图片上传系统，说明这个问题。
1、基本目标
实现以下的1个图片上传的系统，不是基本图片格式，大于1M的图片不给予上传，上传成功显示图片，上传不成功，则显示毛病信息。
2、基本思想
这个工程的目录结构以下，
如fileUpload.HTML的HTML布局所示，Js与ext-theme-classic下面皆是Ext的基本资源。然后Upload文件夹用来寄存上传的图片，fileUpload.HTML就是前台布局页面，里面有1个直接渲染到<body>标签的Panel组件，Panel组件中，唯一1个文件域，相当于<input type="file" />。上传成功以后d出1个可以关闭的窗口window。photosubmit.PHP是上传文件的后台处理页面。
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd"><HTML> <head> <Meta http-equiv="Content-Type" content="text/HTML; charset=utf⑻"> <Title>extfileUpload</Title> <script type="text/JavaScript" src="../Js/ext-all.Js"></script> <script type="text/JavaScript" src="../Js/bootstrap.Js"></script> <script type="text/JavaScript" src="../Js/ext-lang-zh_CN.Js"></script> <link href="../ext-theme-classic/ext-theme-classic-all.CSS" rel="stylesheet" type="text/CSS"> </head> <body> </body></HTML>
3、制作进程
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"><HTML> <head> <Meta http-equiv="Content-Type" content="text/HTML; charset=utf⑻"> <Title>extfileUpload</Title> <script type="text/JavaScript" src="Js/ext-all.Js"></script> <script type="text/JavaScript" src="Js/bootstrap.Js"></script> <script type="text/JavaScript" src="Js/ext-lang-zh_CN.Js"></script> <link href="ext-theme-classic/ext-theme-classic-all.CSS" rel="stylesheet" type="text/CSS"> </head> <body> </body></HTML><script> Ext.onReady(function(){ Ext.onReady(function(){ var form1 = Ext.create('Ext.form.Panel',{ renderTo: Ext.getbody(),method: 'POST',layout: 'anchor',Title: '图片上传',items: [{ xtype: 'filefIEld',anchor: '100%',name: 'file',//此文件传递给后台处理上传页面的标识 allowBlank: false,//不允许为空 buttonText: '选择图片' //那个上传按钮的文字 }],bbar: [{ xtype: 'tbfill' },{ xtype: 'button',text: '肯定',Disabled: true,//没有通过验证，此按钮不可用 formBind: true,Listeners: { click: function(){ var thisForm = form1.getForm(); thisForm.submit({ url: "photosubmit.PHP",success: function(form,action){ Ext.create('Ext.window.Window',{ Title:'上传成功',border: false,//没有边框 items: [{ xtype: 'image',src: action.result.msg }] }).show(); },failure: function(form,{ Title: '上传失败',//没有边框 items: [{ xtype: 'label',text: action.result.msg }] }).show(); } }); } } },{ xtype: 'tbfill' }] }); }) });</script>2、photosubmit.PHP
ExtJs的上传与否取决与这个页面打印出来的Json信息。此页面与《【PHP】文件的上传与下载》（点击打开链接）的上传部份没有半点区分，使用Jsp的朋友可以参考，《【Servlet】利用Servlet3.0标准与JsTL表达式实现文件上传系统，支持图片上传后显示》（点击打开链接）；《【Struts2】文件的上传与上传权限的控制》（点击打开链接）；使用Asp或.NET的朋友也是1样的，关键是你的后台页面处理完上传的文件以后，和《【ExtJs】ExtJs的表单插件与表单布局、提交与验证》（点击打开链接）1样，打印出以下的字符串让fileUpload.HTML辨认：
//ExtJs收到此Json则认为上传成功{ "success":true,"msg":"ss" //要捎回前台的信息 }//ExtJs收到此Json则认为上传失败{ "success":false,"msg":"ss" //要捎回前台的信息} 因此，便有了以下的PHP代码：
<?PHP //看是不是是通过正常途径传递1个file过来了 if(empty($_fileS["file"])){ //如果不是，则是非正常打开此页，马上重定向，假装这页不存在 header("location: error.PHP"); exit; } else{ header("Content-type: text/HTML; charset=utf⑻"); } //这是判断是不是上传的file $canUpload=true; //这样就可以够获得上传的文件名 $filename=$_fileS["file"]["name"]; //通过对$filename的处理，就可以够获得上传的文件的后缀名 $fileExtensions=strrchr($filename,'.'); //这样就可以够获得上传文件的大小 $fileSize=$_fileS["file"]["size"]; //行将被打印的毛病信息 $errmsg=""; //这里是文件的异常，1般不会出现 if($_fileS["file"]["error"]>0){ $errmsg .= "异常：".$_fileS["file"]["error"]."！"; $canUpload=false; } //如果上传的文件名的后缀不是以下的几种则不能上传 if($fileExtensions!=".bmp" && $fileExtensions!=".gif" && $fileExtensions!=".jpg" && $fileExtensions!=".jpeg" && $fileExtensions!=".png"){ $errmsg .= "只能上传图片类型！后缀名必须为：.bmp,gif,jpg,jpeg,png任1！"; $canUpload=false; } //如果上传的文件大于1M则也不能上传 if($fileSize>1*1024*1024){ $errmsg .= "文件太大！请少于1M！"; $canUpload=false; } //如果文件可以上传 if($canUpload==true){ //保存在服务器的名字则是时间戳，加文件后缀名 $savename=time().$fileExtensions; //获得服务器的目录的绝对路径。 $basepath=str_replace('','/',realpath(dirname(__file__).'/'))."/"; //然后则保存这个上传文件 move_uploaded_file($_fileS["file"]["tmp_name"],$basepath."/upload/".$savename); //打印上传成功以后的Json给正在等待的ExtJsAJAX，捎1个图片的保存地址给它。正常来讲，这个地址还应当入库。 echo "{ 'success':true,'msg':'upload/{$savename}' }";} else{ //上传不成功，则捎1个失败信息给前台。 echo "{ 'success':false,'msg':'{$errmsg}' }"; } ?>
以上是内存溢出为你收集整理的【ExtJs】ExtJs的文件上传全部内容，希望文章能够帮你解决【ExtJs】ExtJs的文件上传所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）