Extjs初学者（三）

浏览数：44 / 时间：2015年06月09日

文件的上传与下载

上传：

前台：

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