Php+extjs File Upload Example

Xtjs 4 has a very handy file upload component that can be used to upload files to the server. This article PHP tutorial Uncletoo will introduce the use of PHP and ExtJS to implement the file upload function.

First, create the file Upload component Ext.form.Panel and add an Upload button and button click event that validates and submits the form to the upload.php file. Look at the following code:

ExtJS part

12345678910111213141516171819202122232425262728293031323334353637383940

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() {        varform = this.up(‘form‘).getForm();        if(form.isValid()) {          form.submit({            url: ‘/extjs-tutorials/upload.php‘,            waitMsg: ‘Uploading your file...‘,            success: function(f, a) {              varresult = 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‘  });});

Effect preview:

upload.php file

12345678910111213141516171819

<?phpif($_FILES["file"]["error"] > 0){  $error= $_FILES["file"]["error"];  $response= array(‘success‘=> false, ‘msg‘=> $error);  echojson_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‘  );  echojson_encode($response);}?>

Select the file to upload, and click the Upload button, the effect is as follows:

Php+extjs File Upload Example