Multiple-choice file upload is already very large. If you select more files, you may need to compare which one is more appropriate. It is most important to integrate it into the project for more convenient use. Many of the multiple-choice uploads are basically called swf files. It is very convenient to use flash or flex to develop a multi-choice Upload function. For example, the built-in FileReferenceList object in flex supports multiple file selections, this is much more convenient. Next we will talk about a multi-choice Upload function developed based on flex.
The main functions are as follows:
1. Select multiple files to upload and display the upload progress of a single file
II. Display the overall Upload progress of all files
3. Display the total size of all uploaded files
4. You can delete any selected File (press Ctrl or Shift) before uploading)
5. The swf file generated by the ASP. NET page call is asynchronously uploaded to the server.
Take a look at the screenshot of the demo, as shown below:
The function is roughly the same as the screenshot above. The following describes ASP. how to call in. NET, I will not detail the code in FLEX here, there are not many code in FLEX, the article will be provided for download later, you can use flex3.0 or 4.0 to open and run.
Here is a description, that is, to ensure the correctness of the random multiple-choice deletion, you need to sort the selected index items in descending order and delete them from the maximum array each time, this prevents the index from exceeding the limit during cyclic deletion.
Function deleteItem (): void {
Var selectItems: Array = process_list.selectedItems;
Var selectIndex: Array = process_list.selectedIndices;
SelectIndex = selectIndex. sort (2); // sort indexes in descending order
Var iCount: int = selectItems. length;
Var sizeMum: Number = 0;
For (var I: int = 0; I <iCount; I ++ ){
Info. splice (selectIndex [I], 1 );
FileRef. fileList. splice (selectIndex [I], 1); // The selected items to be removed are removed from large to small by index, so that the index is not exceeded during the removal process.
}
For (var j: Number = 0; j <fileRef. fileList. length; j ++ ){
SizeMum + = fileRef. fileList [j]. size;
}
Process_list.dataProvider = info;
Tip_txt.text = "total" + fileRef. fileList. length + "files" + (sizeMum/(1024*1024). toFixed (4). toString () + "MB ";
If (info. length <= 0 ){
Delete_btn.enabled = false;
}
}
Actually, it is relatively simple to create a new SWF file generated on the ASP tutorial page X. The file name generated here is upload.swf, which is loaded using the methods in flex's built-in swfobject. js, as shown below:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> No title page </title>
<Style type = "text/css tutorial" media = "screen">
Html, body {height: 100% ;}
Body {margin: 0; padding: 0; overflow: auto; text-align: center;
Background-color: # ffffff ;}
# FlashContent {display: none ;}
</Style>
<Script type = "text/webpage effects" src = "swfobject. js"> </script>
<Script type = "text/javascript">
Var swfVersionStr = "10.0.0 ";
Var xiSwfUrlStr = "playerProductInstall.swf ";
Var flashvars = {};
Flashvars. url = "SaveFile. aspx? Param = ID | 100, NAME | test user ";
Var params = {};
Params. quality = "high ";
Params. bgcolor = "# ffffff ";
Params. allowscriptaccess = "sameDomain ";
Params. allowfullscreen = "true ";
Var attributes = {};
Attributes. id = "upload ";
Attributes. name = "upload ";
Attributes. align = "middle ";
Swfobject. embedSWF (
"Upload.swf", "flashContent ",
"587", "370 ",
SwfVersionStr, xiSwfUrlStr,
Flashvars, params, attributes );
Function uploadCompelete (){
// After the operation is completed, such as page jump or close the current page
Document. getElementById ('btnupload'). disabled = false;
}
Function submitForm (){
ThisMovie ("upload"). uploadfile ();
}
Function thisMovie (movieName ){
If (navigator. appName. indexOf ("Microsoft ")! =-1 ){
Return window [movieName];
} Else {
Return document [movieName];
}
}
Function disabledButton ()
{
Document. getElementById ('btnupload'). disabled = true;
}
</Script>
</Head>
<Body>
<Div id = "flashContent" style = "width: 587px; height: Pixel PX">
</Div>
<Br/>
<Input id = "btnUpload" style = "width: 71px" type = "button" value = "upload" onclick = "submitForm ()"/>
</Body>
</Html>
When the page is set to a volume, the uploadfile method in upload.swf is executed. In flex, the uploadHandler method is called back:
// ================================
// Click upload.
// ================================
Internal function uploadHandler (): void {
If (uploadFile_num! = 0) return;
If (process_list.dataProvider = null | info. length <= 0 ){
Alert. show ("You have not selected a file! "," Prompt information ");
Return;
}
Else
{
ExternalInterface. call ("disabledButton"); // Click the disabled button after the upload.
}
For (var I: Number = 0; I <fileRef. fileList. length; I ++ ){
Upload_size_total + = fileRef. fileList [I]. size;
}
Uploadfile (uploadFile_num );
Add_btn.enabled = false; // click upload to disable the Browse button.
Delete_btn.enabled = false; // click upload to disable the delete button.
}
The SaveFile. aspx page receives and stores files as follows:
Protected void Page_Load (object sender, EventArgs e)
{
// String param = Request ["Param"];
String path = Server. MapPath ("files /");
If (! Directory. Exists (path ))
{
Directory. CreateDirectory (path );
}
// HttpFileCollection files = Request. Files;
// String fileName = string. Empty;
// For (int I = 0; I <files. Count; I ++)
//{
// FileName = Path. GetFileName (files [I]. FileName). ToLower ();
// Files [I]. SaveAs (path + fileName );
//}
HttpPostedFile file = Request. Files ["Filedata"]; // Files are submitted asynchronously one by one, so a collection of circular Files is not required.
If (file! = Null & file. ContentLength> 0)
{
File. SaveAs (path + Request. Form ["filename"]);
}
}
After all, it is not received and stored in the form of a file stream. Therefore, if you upload a large file, you can see that the page has been uploaded 100%, but the storage processing page will pause for a while, after receiving and storing the information, the front-end page will respond.
Another point to mention is that if the transmitted parameters contain Chinese characters, the config encoding format must be UTF-8, but the original system may be in gb2312 format, changing to UTF-8 may have an impact on the system. You can create a webconfig file separately and read a separate config file during upload. I checked and said flash. system. System. useCodePage = true; setting can solve the Chinese garbled text problem. I tried it and it is still not easy to use.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
