PHP+ExtJS 文件上传示例

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

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

ExtJS部分

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

Ext.onReady(function () {   Ext.widget('form', {     title: 'Upload Demo',      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文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

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