Extjs文件上传

最新推荐文章于 2026-06-15 14:44:18 发布

转载最新推荐文章于 2026-06-15 14:44:18 发布 · 1.1k 阅读

本文介绍如何利用ExtJS框架创建一个文件上传表单，并详细解释了相关代码配置及实现流程，包括设置表单参数、验证文件输入、显示上传进度等。

                    head> 

 03.
     <title>Uploading</title> 

 04.
     <link rel="stylesheet" type="text/css"  href="../../resources/css/ext-all.css"/> 

 05.
   
 06.
     <!-- GC --> 

 07.
     <!-- LIBS --> 

 08.
     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 

 09.
     <!-- ENDLIBS --> 

 10.
   
 11.
     <script type="text/javascript" src="../../ext-all.js"></script> 

 12.
   
 13.
     <script type="text/javascript" src="upload.js"></script> 

 14.
     <link rel="stylesheet" type="text/css"  href="forms.css"/>  

 15.
   
 16.
     <!-- Common Styles for the examples -->  

 17.
     <link rel="stylesheet" type="text/css"  href="../examples.css"/>  

 18.
 </head> 

 19.
 <body> 

 20.
 <script type="text/javascript" src="../examples.js"></script> 

 21.
 <!-- EXAMPLES --> 

 22.
 <h1>Upload with Forms</h1> 

 23.
   
 24.
 <p>The js is not minified so it is readable. See  

 25.
 <a href="upload.js">upload.js</a>.</p> 

 26.
 <p> </p> 

 27.
 <p><a href="javascript:window.location.reload();">reload</a></p> 

 28.
 </body> 

 29.
 </html>
upload.js
 
view source
print?

   01.
   Ext.QuickTips.init(); 
  
   02.
   Ext.form.Field.prototype.msgTarget = 'side';  
  
   03.
   Ext.onReady(function() { 
  
   04.
     var form = new  Ext.form.FormPanel({ 
  
   05.
       baseCls: 'x-plain', 
  
   06.
       labelWidth: 80, 
  
   07.
       url:'upload.php', 
  
   08.
       fileUpload:true, 
  
   09.
       defaultType: 'textfield', 
  
   10.
     
   11.
       items: [{ 
  
   12.
         xtype: 'textfield', 
  
   13.
         fieldLabel: 'File Name', 
  
   14.
         name: 'userfile', 
  
   15.
         inputType: 'file', 
  
   16.
         allowBlank: false, 
  
   17.
         blankText: 'File can\'t not empty.',  
  
   18.
         anchor: '90%'  // anchor width by percentage 
  
   19.
       }] 
  
   20.
     }); 
  
   21.
     
   22.
     var win = new  Ext.Window({ 
  
   23.
       title: 'Upload file', 
  
   24.
       width: 400, 
  
   25.
       height:200, 
  
   26.
       minWidth: 300, 
  
   27.
       minHeight: 100, 
  
   28.
       layout: 'fit', 
  
   29.
       plain:true, 
  
   30.
       bodyStyle:'padding:5px;', 
  
   31.
       buttonAlign:'center', 
  
   32.
       items: form, 
  
   33.
     
   34.
       buttons: [{ 
  
   35.
         text: 'Upload', 
  
   36.
         handler: function() { 
  
   37.
           if(form.form.isValid()){ 
  
   38.
             Ext.MessageBox.show({ 
  
   39.
                  title: 'Please wait', 
  
   40.
                  msg: 'Uploading...', 
  
   41.
                  progressText: '', 
  
   42.
                  width:300, 
  
   43.
                  progress:true, 
  
   44.
                  closable:false, 
  
   45.
                  animEl: 'loding'
  
   46.
                }); 
  
   47.
             form.getForm().submit({     
  
   48.
               success: function(form, action){  
  
   49.
                  Ext.Msg.alert('Message from extjs.org.cn',action.result.msg); 
  
   50.
                  win.hide();   
  
   51.
               },     
  
   52.
                failure: function(){     
  
   53.
                 Ext.Msg.alert('Error', 'File upload failure.');     
  
   54.
                } 
  
   55.
             })            
  
   56.
           } 
  
   57.
          } 
  
   58.
       },{ 
  
   59.
         text: 'Close', 
  
   60.
         handler:function(){win.hide();} 
  
   61.
       }] 
  
   62.
     }); 
  
   63.
     win.show(); 
  
   64.
   });
  
upload.php
 
view source
print?

   01.
   <?php 
  
   02.
   //上传文件全称 
  
   03.
   $uploadfile = "upload_files/".basename($_FILES['userfile']['name']); 
  
   04.
     
   05.
   $message = ""; 
  
   06.
   if (@move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { 
  
   07.
       $message = "File was successfully uploaded."; 
  
   08.
   }  
  
   09.
   else 
  
   10.
   { 
  
   11.
       $message = "Possible file upload attack!"; 
  
   12.
   } 
  
   13.
     
   14.
   print "{success:true,msg:'".$message."'}"; 
  
   15.
   ?>