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 : 200 19 }, 20 renderTo: Ext.getBody(), 21 bodyPadding: 5, 22 defaultType: 'textfield',//设置表单字段的默认类型 23 items:[{ 24 fieldLabel:'文件名', 25 name : 'fileName', 26 allowBlank : false 27 }], 28 buttons:[{ 29 text : '文件下载', 30 handler : downFile 31 }] 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 <?php 2 $filename = $_GET['filename']; 3 4 $path = "/examples/test/txt/$filename.txt"; 5 6 print "{success:true,path:'".$path."',get:'".$filename."'}"; 7 ?>
