Ext multi-File Upload control Ext. ux. UploadDialog

The Ext. ux. UploadDialog interface is displayed as follows in ext:

Before uploading

Uploading process:

Strong. How to use it .?

Search for Ext. ux. UploadDialog. Package download by yourself

Use is necessary to import the ext package.

<Link rel = "stylesheet" href = "Ext. ux. UploadDialog/css/Ext.ux.UploadDialog.css"/>
<Script type = "text/javascript" src = "Ext. ux. UploadDialog/Ext. ux. UploadDialog. packed. js"> </script>

The core code for getting an onclick event is as follows:

1. Function
   InsertImages ()
2. {
3. Dialog =
   New
   Ext. ux. UploadDialog. Dialog ({
4. Title:
   'Close the window during file _ upload without affecting _ wayfoon'
   ,
5. Url: wayfoon. MMS. DataPage +
   '/Xxx. action? Action = XXX'
   ,
7. Width: 450,
8. Height: 300,
9. Minwidth: 450,
10. Minheight: 300,
11. Draggable:
    True
    ,
12. Resizable:
    True
    ,
13. 
    // Autocreate: True,
14. Constraw.viewport:
    True
    ,
15. Permitted_extensions :[
    'Jpg'
    ,
    'Jpg'
    ,
    'Jpeg'
    ,
    'Jpeg'
    ,
    'Gif'
    ,
    'Gif'
    ,
    'Bmp'
    ,
    'Bmp'
    ],
16. Modal:
    True
    ,
17. 
    // Post_var_name: 'mms ',
18. Reset_on_hide:
    False
    ,
19. Allow_close_on_upload:
    True
    ,
    // Close the upload window and check whether the file is still uploaded
20. Upload_autostart:
    False
    
    // Whether to automatically upload files
21. });
23. Dialog. Show ();
    // 'Show-click'
24. Dialog. On (
    'Uploadsuccess'
    , Onuploadsuccess );
26. }

When submitting, the default submitted file name is file. You can modify post_var_name: 'myfile ',

There are many events in dialog, as shown in the following English. The uploadsuccess event is used in this example.

• Filetest
  -Fires before file is added into the queue, parameters:
  Dialog
  -Reference to Dialog
  Filename
  -File Name
  If handler returns false then file will not be queued.
• Fileadd
  -Fires when file is added into the queue, parameters:
  Dialog
  -Reference to Dialog
  Filename
  -File Name
• Fileremove
  -Fires when file is removed from the queue, parameters:
  Dialog
  -Reference to Dialog
  Filename
  -File name
  Record
  -File record
• Resetqueue
  -Fires when upload queue is resetted, parameters:
  Dialog
  -Reference to dialog
• Beforefileuploadstart
  -Fires when file as about to start uploading:
  Dialog
  -Reference to dialog
  Filename
  -Uploaded file name
  Record
  -File record
  If handler returns false then file upload will be canceled.
• Fileuploadstart
  -Fires when file has started uploading:
  Dialog
  -Reference to dialog
  Filename
  -Uploaded file name
  Record
  -File record
• Uploadsuccess
  -Fires when file is successfuly uploaded, parameters:
  Dialog
  -Reference to dialog
  Filename
  -Uploaded file name
  Data
  -Js-object builded from json-data returned from upload handler response.
  Record
  -File record
• Uploaderror
  -Fires when file upload error occured, parameters:
  Dialog
  -Reference to dialog
  Filename
  -Uploaded file name
  Data
  -Js-object builded from json-data returned from upload handler response.
  Record
  -File record
• Uploadfailed
  -Fires when file upload failed, parameters:
  Dialog
  -Reference to dialog
  Filename
  -Failed file name
  Record
  -File record
• Uploadcanceled
  -Fires when file upload canceled, parameters:
  Dialog
  -Reference to dialog
  Filename
  -Failed file name
  Record
  -File record
• Uploadstart
  -Fires when upload process starts, parameters:
  Dialog
  -Reference to dialog
• Uploadstop
  -Fires when upload process stops, parameters:
  Dialog
  -Reference to dialog
• Uploadcomplete
  -Fires when upload process complete (no files to upload left), parameters:
  Dialog
  -Reference to dialog

Note that only one file is uploaded each time. Multiple files are uploaded multiple times.

We can see that many background Code uses multi-file loop reading, but it is not necessary. We only need to process one file.

There are many examples on the Internet, which can only be called examples. There is still some distance from the application, and flexibility is needed for the application.

For example, we need to input our own parameters, which is hard to find online. In fact, we can change the submitted parameters in the event,

Implemented using the attribute base_params: {hehe: "wayfoon,

Function onUploadSuccess (dialog, filename, resp_data, record)

{

You can change some dialog values.

Resp_data is the returned json data.

}

 

 

Http://blog.csdn.net/wayfoon322/archive/2008/12/17/3541095.aspx