Multiple-selection file upload, has been very much, more selective may sometimes be compared to which more appropriate, combined with the project to use more convenient is the most important. Many of the multiple-selection upload is basically called SWF file, do use Flash or flex to develop a more selective upload function is very convenient, such as flex in the built-in Filereferencelist object itself to support the file of multiple elections, this will be more convenient, The following to say is mainly based on the flex development of a multiple-selection upload function.
The main implementation features are as follows:
Select multiple files to upload and display a single file upload progress
Show the total upload progress of all documents
Display the total size of all uploaded files
Four, before uploading can delete any selected one or more files (hold down CTRL or SHIFT key)
Five, ASP. NET page call generated SWF file uploaded to server asynchronously
Take a look at the screenshot shown below:
The general function and the screenshot above, the following main next asp.net how to call, flex the inside code I do not detail here, Flex inside the code is not much, after the article to provide download, with flex3.0 or 4.0 can be opened to run.
There is a place to explain, is in the more selective deletion of the place, in order to ensure the correctness of optional multiple deletion, you need to sort the selected entries in descending order, each time from the array to remove the largest, to avoid circular deletion when the index hyper-bounded.
function DeleteItem (): void{
var selectitems:array = process_list.selecteditems;
var selectindex:array = process_list.selectedindices;
Selectindex = Selectindex.sort (2);//index 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)//Removed selections are removed by index from large to small so that the index does not exceed bounds in the process of removing
(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;
}
}
The call is actually simpler, a new ASP Tutorial x page loads the generated SWF file, where the generated filename is upload.swf and is loaded using Flex's built-in Swfobject.js method, as follows:
<html xmlns= "http://www.w3.org/1999/xhtml" > <head> <title> Untitled page </title> <style type= "Tex
T/css Tutorial "media=" > HTML, Body {height:100%;}
body {margin:0; padding:0; overflow:auto; text-align:center; Background-color: #ffffff;
} #flashContent {Display:none;} </style> <script type= "text/web 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 () {//finished operation, such as page jumps or closes 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:380px "> </div> <br/> <input id=" btnupload "style=" width:71px "type=" button "value=" Upload " Onclick= "SubmitForm ()"/> </body> </html> as above, the page places a button,
Execute upload.swf inside UploadFile method, in flex inside actually is callback Uploadhandler method://===================//Click on the Upload button//===================
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!", "hint info");
Return else {externalinterface.call ("Disabledbutton");///Point upload Disable button} for (Var i:number=0;i<fileref.filelist.length;i++
) {upload_size_total+=fileref.filelist[i].size;
} uploadfile (Uploadfile_num); add_btn.enabled = false; Point upload Disable browse button delete_btn.enabled = false;//point upload after disable delete button Savefile.aspx page is mainly to receive and store files, as follows: protected void Page_Load (Objec
T 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"]; The file is a single asynchronous commit, so there is no need to cycle the file collection if (file!= null && file. ContentLength > 0) {FIle.
SaveAs (path+request.form["filename"]); }
}
After all, not as a file stream to receive and store, so if you are uploading large files, you can see that the Display page has been uploaded to complete 100%, but to this processing storage page will pause for a while, receive and store the completion of the front page will respond.
Another point to mention is that if the parameters are passed in Chinese, you need the Config encoding format for utf-8 format, but the original system may be gb2312 format, changed to Utf-8 may have an impact on the system, you can build a separate webconfig, Read a separate config when uploading.
The above is asp.net batch file upload code, hope to be able to solve the ASP.net upload multiple files when you encounter problems.
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
