PHP+ExtJS 文件上传示例

xtJS 4 有一个非常方便的文件上传组件，可以用来将文件上传到服务器。本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能。

       首先，创建文件上传组件Ext.form.Panel，并添加一个上传按钮及按钮单击事件，该事件将验证并提交表单到upload.php的文件。看下面代码：

 

ExtJS部分

Ext.onReady( function  () {
  Ext.widget( 'form' , {
    title:  'Upload Demo' ,
    width: 400,
    bodyPadding: 10,
    items: [{
      xtype:  'filefield' ,
      name:  'file' ,
      fieldLabel:  'File' ,
      labelWidth: 50,
      anchor:  '100%' ,
      buttonText:  'Select File...'
    }],
    buttons: [{
      text:  'Upload' ,
      handler:  function  () {
        var  form =  this .up( 'form' ).getForm();
        if  (form.isValid()) {
          form.submit({
            url:  '/extjs-tutorials/upload.php' ,
            waitMsg:  'Uploading your file...' ,
            success:  function  (f, a) {
              var  result = a.result, data = result.data,
                name = data.name, size = data.size,
              message = Ext.String.format( '<b>Message:</b> {0}<br>'  +
                '<b>FileName:</b> {1}<br>'  +
                '<b>FileSize:</b> {2}' ,
                result.msg, name, size);
              Ext.Msg.alert( 'Success' , message);
            },
            failure:  function  (f, a) {
              Ext.Msg.alert( 'Failure' , a.result.msg);
            }
          });
        }
      }
    }],
    renderTo:  'output'
  });
});

效果预览：

 

Upload.php文件

<?php
if  ( $_FILES [ "file" ][ "error" ] > 0)
{
  $error   =  $_FILES [ "file" ][ "error" ];
  $response  =  array ( 'success'  => false,  'msg'  =>  $error );
  echo  json_encode( $response );
}
else
{
  $file_name  =  $_FILES [ "file" ][ "name" ];
  $file_type  =  $_FILES [ "file" ][ "type" ];
  $file_size  =  round ( $_FILES [ "file" ][ "size" ] / 1024, 2) .  "  Kilo Bytes" ;
  $response  =  array ( 'success'  => true,
    'data'  =>  array ( 'name'  =>  $file_name ,  'size'  =>  $file_size ),
    'msg'  =>  'File Uploaded successfully'
  );
  echo  json_encode( $response );
}
?>

选择要上传的文件，并点击上传按钮，效果如下：