ExtJS 4: file upload example using PHP
- Monday, April 14, 2014, 19:42
- ExtJS
- 18,318 views
ExtJS 4 has a very handy file component which can be used to upload files to server. Lets see today how to use ExtJS file component to upload file on server. I am using PHP to upload file but you can use Java, Ruby or C#.
First, create a Ext.form.Panel with file component. Add a Upload button and a button click handler. This handler will validate and submit form to upload.php file.
|
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', 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 file…
|
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); } ?> |
Output will look similar to as follows…
After successfully upload of file..
About the Author
Tousif Khan has written 69 posts.
I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google Wanna Hire me ?