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);
}
?>

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