One of flex's multi-file uploads: front-end

I searched for some files uploaded by flex from the Internet.ArticleSuch:

Flex 2.0 uploads files from scratch
Flex2.0 file upload function (flex2.0 official version)

The general principle is to use filereference, while filereference is only the upload of a single file. It can be seen from the two examples above. In fact, there is also a filereference that is used to upload multiple files, that is, filereferencelist. You can also guess from the name, which can be used to upload multiple files.

The front-end part here refersCodeOnly the call of the upload method written to filereference is the link between the parameters of this method and the background. Because the background may be different, the implementation will be different. In this example, Java is used.

After writing a component, the basic functions are as follows: to view and upload files; To monitor the upload progress of each file with a progress bar; To list file information, the figure below is final:

This component is described in detail below:

1. A DataGrid list to display the selected file information
2. There is a progress bar and a delete button in the last column of the list. The progress bar monitors the upload progress of the file and is displayed as a percentage. The delete button is removed from the current list file.
3. The following three buttons are used to browse, upload, and close the current window. If there is no file in the list, the upload button is unavailable.
4. The window inherits from titlewindow. The status attribute displays the number of selected files and total file size.

Improvement points:
1. Cancellation of each file during the upload Process
2. filter file types when Browsing files

The main code is as follows:

1) browsing method of filereferencelist, which is the same as browse of filereference, but multiple files can be selected in the pop-up window:
// Select multiple files
Private function selecthandler (Event: Event): void {
For (var I: Int = 0; I <frlist. filelist. length; I ++ ){
VaR F: filereference = filereference (frlist. filelist [I]);

VaR OBJ: Object = new object ();
OBJ. filename = f. Name;
OBJ. filesize = f. size;
OBJ. filetype = f. type;
OBJ. filerefrence = F;
Selectedfiles. additem (OBJ );
}
}

Frlist is the filereferencelist variable, and its filelist is a filereference list, which includes information about each selected file, such as name, size, and type.

Selectedfiles is an arraycollection object used to save the selected file and use it as the dataprovider of the DataGrid.

To enable the progress bar in the DataGrid to monitor the upload progress, the filereference object is used as the attribute of each data record in the DataGrid. It will be seen in later code.

2) handling upload button events

// Upload files one by one
Private function uploadhandler (Event: mouseevent): void {
Var file: filereference;
For (var I: Int = 0; I <selectedfiles. length; I ++ ){
File = filereference (selectedfiles [I]. filerefrence );
File. Upload (New URLRequest (uploadurl ));
}
}

Previously, selectedfiles were defined to facilitate processing.

3) itemrenderer definition in the progress bar of the DataGrid list

A progress bar, a Cancel button, and a delete button

<Mx: datagridcolumn width = "130" headertext = "status">
<Mx: itemrenderer>
<Mx: component>
<Mx: hbox width = "130" paddingleft = "2" horizontalgap = "2">
& Lt; mx: progressbar id = "progress" width = "100%"
Minimum = "0" Maximum = "100" Source = "{data. filerefrence }"
Labelplacement = "center" Progress = "progress. Label ='' % 3% % ';"
Label = "% 3% %">
</MX: progressbar>
<Mx: linkbutton width = "20" tooltip = "cancel upload" Click = "cancel ()"
Icon = "{buttonassets. delicon}">
<Mx: SCRIPT>
<! [CDATA [
Private function cancel (): void {
Data. filerefrence. Cancel ();
Progress. Label = "canceled ";
}
]>
</MX: SCRIPT>
</MX: linkbutton>
<Mx: linkbutton width = "20" Click = "deleteitem (event )"
Icon = "{buttonassets. deleteicon}" tooltip = "delete from List">
<Mx: SCRIPT>
<! [CDATA [
Import com. nstar. Base. Controls. buttonassets;
Import MX. Collections. arraycollection;
Import MX. Controls. DataGrid;

Private function deleteitem (Event: mouseevent): void {
VaR grid: Object = event.tar get. Parent. Parent. parent;
VaR DP: arraycollection = arraycollection (grid. dataprovider );
VaR index: Int = DP. getitemindex (data );
DP. removeitemat (INDEX );
Grid. Parent. Refresh ();
}
]>
</MX: SCRIPT>
</MX: linkbutton>
</MX: hbox>
</MX: component>
</MX: itemrenderer>
</MX: datagridcolumn>

Sets the source attribute of progress to monitor the File Upload progress.

Source = "{data. filerefrence}", where filerefrence is set during file browsing.

4) enabled attribute settings of the upload button

Enabled = "{selectedfiles. length> 0 }"

If multiple files are selected, they are available; otherwise, they are unavailable.

5) show method of components

A static method is added to the component, so that the caller only needs to call this method.

Public static function show (uploadurl: String = ""): void {
VaR parentapp: Application = application. Application as application;
VaR UV: uploadview = uploadview (popupmanager. createpopup (parentapp, uploadview, true ));
UV. uploadurl = uploadurl;
Popupmanager. centerpopup (UV );

}

Call sample code:

Uploadview. Show ("http: // localhost: 8080/helloworld/fileupload ");

The parameter of the method is the URL that implements the upload function in the background. The default value is null. In this way, you can choose not to pass the parameter during debugging to see the effect.

The parameters here are the interaction points with the background.