Original article address:
Http://www.cnblogs.com/lucslg/archive/2011/06/26/2090885.html
Because the customer needs to upload large files, the traditional mvc File Upload method cannot meet the current needs. So brother can only search for ready-made columns on the Internet. After searching for a long time, he did not find a good demo.
Most of them are. net webFrom examples. They are all encapsulated controls, and they are suddenly depressed.
Although no good examples are found on the Internet, a good solution is to use the swfUpload control. SwfUpload is a combination of javascript and falsh. The online recommendation index is relatively high and there are many materials.
English api Web site: http://leeon.me/upload/other/swfupload.html
1. Want to see.
2.swf Upload is flexible and scalable. It takes time to get familiar with it. It took me half a day to figure it out. Also available on the official website. The net example is also webFrom.
3. simply look at the code: control layer:
Public Guid Swfupload ()
{
String uploadsFolder = HttpContext. Server. MapPath ("~ /Upload ");
Guid identifier = Guid. NewGuid ();
Var uploadsPath = Path. Combine (uploadsFolder, identifier. ToString ());
Var httpfile = Request. Files ["Filedata"];
If (httpfile! = Null)
{
Httpfile. SaveAs (uploadsPath );
}
Return identifier;
}
4. For details about the display layer, see the examples on the official website. It is quite good. I wrote another example using the jqueryUI control. It mainly replaces the progress bar on the official website.
Click Upload to display the upload progress in the dialog box.
@{
ViewBag. Title = "File Upload Demo ";
Layout = "~ /Views/Shared/_ Layout. cshtml ";
}
@ Section Head {
<Script src = "/Scripts/SwfUpload/swfupload. js" type = "text/javascript"> </script>
<Script src = "/Scripts/SwfUpload/plugins/swfupload. queue. js" type = "text/javascript"> </script>
<Script src = "/Scripts/SwfUpload/plugins/swfupload. speed. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var swfu;
Window. onload = function (){
Swfu = new SWFUpload ({
Upload_url: "/Home/Swfupload ",
Flash_url: "/Scripts/SwfUpload/Flash/swfupload.swf ",
File_size_limit: "1500 MB ",
File_types :"*.*",
File_types_description: "All Files ",
File_upload_limit: 0,
File_queue_limit: 1,
Debug: false,
// Button settings
Button_image_url: "/Scripts/SwfUpload/Images/TestImageNoText_65x29.png ",
Button_width: "65 ",
Button_height: "29 ",
Button_placeholder_id: "spanButtonPlaceHolder ",
Button_text: '<span class = "theFont"> browse </span> ',
Button_text_style: ". theFont {font-size: 16 ;}",
Button_text_left_padding: 12,
Button_text_top_padding: 3,
File_dialog_complete_handler: function (numFilesSelected, numFilesQueued ){
},
File_queued_handler: function (file ){
$ ("# FileName"). val (file. name );
},
Upload_progress_handler: function (file, complete, total ){
Var value = complete/total * 100;
$ ("# Progressbar"). progressbar ("value", value );
$ ("# CurrentSpeed" 2.16.html (SWFUpload. speed. formatBPS (file. currentSpeed ));
},
Upload_success_handler: function (file, data ){
Alert ("File Uploaded successfully ");
$ ("# FileProgress"). dialog ("close ");
}
});
$ ("# BtnSubmit"). click (function (){
If (swfu. getStats (). files_queued> 0 ){
$ ("# FileProgress"). dialog ({
Modal: true,
Width: 400,
Open: function (){
$ ("# Progressbar"). progressbar ({
Value: 0
});
Swfu. startUpload ();
}
});
}
});
$ ("# CancelButton"). click (function (){
Swfu. stopUpload ();
});
};
</Script>
}
<Fieldset>
<Legend> File Upload Demo </legend>
<Div>
<Input type = "text" id = "fileName"/>
<Span id = "spanButtonPlaceHolder"> browse </span>
<Button id = "btnSubmit">
Upload </button>
</Div>
</Fieldset>
<Div title = "File Upload progress" id = "fileProgress" style = "display: none">
<Div id = "progressbar">
</Div>
<Button id = "cancelButton">
Cancel upload </button>
Current upload speed: <span id = "CurrentSpeed"> </span>
</Div>
5. Demo: http://files.cnblogs.com/lucslg/SwfUploadDemo.rar