Extjs File Upload example

In Extjs, there is no good way to upload files to extended components. There are also many different methods available on the Internet. I use Ext. ux. UploadDialog.
Reference xml code in the file

1. <Script type = "text/javascript" src = "lib/extjs. ux/Ext. ux. UploadDialog. js"> </script>
2. <Script type = "text/javascript" src = "lib/extjs. ux/Ext. ux. ProgressBar. js"> </script>
3. <Link rel = "stylesheet" type = "text/css" href = "css/Ext.ux.ProgressBar.css"/>
4. <Link rel = "stylesheet" type = "text/css" href = "css/Ext.ux.UploadDialog.css"/>

Then add the following JavaScript code to the js Code:

1. Var dialog = new Ext. ux. UploadDialog. Dialog (null ,{
2. AutoCreate: true,
3. Closable: true,
4. Collapsible: false,
5. Draggable: true,
6. MinWidth: 400,
7. MinHeight: 200,
8. Width: 400,
9. Height: 350,
10. Permitted_extensions: ['jpg ', 'jpg', 'jpeg ', 'jpeg', 'gif', 'gif'],
11. ProxyDrag: true,
12. Resizable: true,
13. Constraw.viewport: true,
14. Title: 'file upload ',
15. Url: 't_ file_upload.php ',
16. Reset_on_hide: false,
17. Allow_close_on_upload: true
18. });

When the upload button is clicked, the upload dialog box is displayed: js Code

1. BtnUpload. on ("click", function (){
2. Dialog. show ();
3. });

The following is how to process uploaded operations in the t_file_upload.php file: java code

1. <? Php
2. $ File = "";
3. $ Result = array ();
4. $ Ext = strrchr ($ _ FILES ["file"] ["name"], '.');
5. $ File = "". date ("YmdHis"). $ ext;
6. If (move_uploaded_file ($ _ FILES ["file"] ["tmp_name"], "images/upload/". $ file )){
7. $ Result = array ('success' => true, data => $ file );
8. } Else {
9. $ Result = array ('success' => false, 'error' => 'file upload error ');
10. }
11. Echo json_encode ($ result );
12. ?>

The content of the uploaded file is file, which is required :)
The attachment uploads the component library.

• Ext.ux.UploadDialog.zip (16 KB)
• Description: Component Library.