首页 > 代码库 > Extjs初学者（三）
Extjs初学者（三）
文件的上传与下载
上传：
前台：
1 <html> 2 <head> 3 <title>图书管理界面</title> 4 <link rel="stylesheet" type="text/css" href="../ext-4.2.1/resources/css/ext-all.css"/> 5 <script type="text/javascript" src="../ext-4.2.1/bootstrap.js"></script> 6 7 <script> 8 Ext.onReady(function(){ 9 Ext.QuickTips.init();10 var uploadForm = Ext.create(‘Ext.form.Panel‘,{11 title:‘Ext.form.field.File示例‘,12 bodyStyle:‘padding:5 5 5 5‘,//表单边距13 frame : true,14 height:100,15 width:300,16 renderTo:Ext.getBody(),17 defaults:{//统一设置表单字段默认属性18 labelSeparator :‘：‘,//分隔符19 labelWidth : 50,//标签宽度20 width : 150,//字段宽度21 allowBlank : false,//是否允许为空22 labelAlign : ‘left‘,//标签对齐方式23 msgTarget :‘side‘ //在字段的右边显示一个提示信息24 },items:[{25 xtype: ‘filefield‘,26 name: ‘photo‘,27 fieldLabel: ‘照片‘,28 anchor: ‘100%‘,29 buttonText: ‘选择照片...‘30 }],31 buttons: [{32 text: ‘上传文件‘,33 handler: function() {34 var form = uploadForm.getForm();35 if(form.isValid()){36 form.submit({37 url: ‘ll.php‘,38 waitMsg: ‘正在上传照片文件请稍候...‘,39 success: function(fp, o) {40 Ext.Msg.alert(‘提示信息‘, ‘您的照片文件 "‘ + o.result.file + ‘"已经成功上传。‘);41 }42 });43 }44 }45 }]46 });47 48 });49 50 </script>51 </head>52 <body>53 </body>54 </html>
ll.php
1 <?php 2 //上传文件全称 3 $uploadfile = "txt/".basename($_FILES[‘photo‘][‘name‘]); 4 5 $message = ""; 6 if (@move_uploaded_file($_FILES[‘photo‘][‘tmp_name‘], $uploadfile)) 7 { 8 $message = "File was successfully uploaded."; 9 } 10 else 11 {12 $message = "Possible file upload attack!";13 }14 15 print "{success:true,msg:‘".$message."‘}";16 ?>
效果图：
结果是会在名为txt的文件夹下保存
下载：
1 <HTML> 2 <HEAD> 3 <TITLE>标准模式的表单数据提交</TITLE> 4 <link rel="stylesheet" type="text/css" href="../ext-4.2.1/resources/css/ext-all.css"/> 5 <script type="text/javascript" src="../ext-4.2.1/bootstrap.js"></script> 6 <script type="text/javascript"> 7 Ext.onReady(function(){ 8 Ext.QuickTips.init();//初始化提示; 9 var downloadForm = Ext.create(‘Ext.form.Panel‘,{10 title:‘表单提交示例‘,11 width : 230,12 frame : true,13 standardSubmit : true,//使用Ext.form.action.StandardSubmit提交数据14 fieldDefaults:{//统一设置表单字段默认属性15 labelSeparator :‘：‘,//分隔符16 labelWidth : 50,//标签宽度17 msgTarget : ‘side‘,18 width : 20019 },20 renderTo: Ext.getBody(),21 bodyPadding: 5,22 defaultType: ‘textfield‘,//设置表单字段的默认类型23 items:[{24 fieldLabel:‘文件名‘,25 name : ‘fileName‘,26 allowBlank : false27 }],28 buttons:[{29 text : ‘文件下载‘,30 handler : downFile31 }]32 });33 34 function downFile(){//提交表单35 var name = downloadForm.getForm().getValues();36 Ext.MessageBox.confirm(‘提示‘,‘确定要导出用户吗?‘,function(btn){37 if(btn=="yes")38 { 39 Ext.Ajax.request({40 url:"download.php",41 method:‘GET‘,42 params:{filename:name},43 success:function(res){44 var obj = Ext.decode(res.responseText);45 console.dir(obj);46 window.location.href = obj.path;47 }48 });49 }50 });51 }52 });53 </script>54 </HEAD>55 <BODY STYLE="margin: 10px"></BODY>56 </HTML>
download.php
1 <?php2 $filename = $_GET[‘filename‘];3 4 $path = "/examples/test/txt/$filename.txt";5 6 print "{success:true,path:‘".$path."‘,get:‘".$filename."‘}";7 ?>
Extjs初学者（三）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。