Large File Upload progress bar (similar to the csdn resource upload effect)

Browse-select a file-click "Upload" and the effect is as follows:

The transparent UI mask layer is displayed and the upload process is displayed. I have set it to be too transparent and the effect is not very stereoscopic.

File structure

 

(The use of "mountain laike" Large File Upload Component http://www.cnblogs.com/bashan/archive/2008/05/23/1206095.html)

And newtonsoft. JSON. dll JSON string deserialization for object http://james.newtonking.com/projects/json-net.aspx

Jquery. blockui. js pop-up transparent mask layer http://malsup.com/jquery/block/

Jquery. Form. js Form Verification Ajax submission

Thanks to the article "ant flying". Thank you, http://blog.csdn.net/jetsteven.

 

 

HTML:

<Form ID = "uploadform" runat = "server" enctype = "multipart/form-Data"> <Div id = "uploadfield" style = "width: 600px; height: 500px "> <input id =" file1 "type =" file "runat =" server "/> <asp: button id = "button1" runat = "server" text = "Upload" onclick = "button#click"/> <p> File Upload progress bar </P> <p> File Upload progress bar </P> <p> File Upload progress bar </P> <p> File Upload progress bar </P> </div> <Div id = "UI" style = "display: none "> <Div id =" output "> </div> <Div id =" progressbar "class =" UI-progressbar UI-widget-content UI-corner- all "style =" width: 296px; Height: 20px; "> </div> <input id =" btn_cancel "type =" button "value =" cancel upload "/> </div> </form>

js:

VaR inte; $ (function () {$ ('# uploadform '). submit (function () {return false ;}); $ ('# uploadform '). ajaxform ({// call jquery here. form. JS form registration method beforesubmit: function (A, F, O) {// processing o before submission. datatype = "JSON"; $ ('# uploadfield '). block ({message: $ ('# Ui'), CSS: {width: '300px', border: '# b9dcfe 1px solid', padding: '0. 5em 0.2em '}); inte = self. setinterval ("getprogress ()", 500) ;}}); $ ('# btn_cancel '). click (function () {var uploadid = $ ("# uploadid "). val (); $. ajax ({type: "Post", datatype: "JSON", async: false, // For Ajax requests, only one thread URL is synchronized: "upload_ajax.ashx", data: "uploadid =" + uploadid + "& cancel = true", success: function (OBJ) {$ ("# output" ).html (obj. MSG); inte = self. clearinterval (inte); $ ('# uploadfield '). unblock () ;}}) ;}); function getprogress () {var uploadid =$ ("# uploadid "). val () $. ajax ({type: "Post", datatype: "JSON", async: false, URL: "upload_ajax.ashx", data: "uploadid =" + uploadid, success: function (OBJ) {var P = obj. MSG. readedlength/obj. MSG. totallength * 100; var info = "<font color = green> currently uploaded file: </font>" + obj. MSG. currentfile; Info + = "<br> <font color = green>" + obj. MSG. formatstatus + ": </font>" + obj. MSG. status; Info + = "<br> <font color = green> file size: </font>" + obj. MSG. totallength; Info + = "<br> <font color = green> speed: </font>" + obj. MSG. formatratio; Info + = "<br> <font color = green> remaining time: </font>" + obj. MSG. lefttime; $ ("# output" ).html (Info); $ ("# progressbar "). progressbar ({value: 0}); // initialize $ ("# progressbar "). progressbar ("option", "value", P); $ ("# progressbar Div" ).html (P. tofixed (2) + "%"); $ ("# progressbar Div "). addclass ("percenttext"); If (obj. MSG. status = 4) {inte = self. clearinterval (inte); $ ('# uploadfield '). unblock ();}}});}

Interaction Process Code:

<% @ Webhandler Language = "C #" class = "progressbar" %> using system; using system. web; using bigfileupload; // large file reference namespace using newtonsoft. JSON; // mutual conversion between objects and JSON using system. text. regularexpressions; // regular public class progressbar: ihttphandler {private string template = "{statue: '{0}', MSG: {1 }}}"; public void processrequest (httpcontext context) {context. response. contenttype = "text/plain"; try {string guid = C Ontext. request ["uploadid"]; string cancel = context. request ["cancel"]; uploadcontext c = uploadcontextfactory. getuploadcontext (guid); If (! String. isnullorempty (cancel) {C. abort = true; throw new exception ("User canceled");} string JSON = newtonsoft. JSON. jsonconvert. serializeobject (c); writeresultjson (1, JSON, context, template);} catch (exception ERR) {writeresultjson (0, err. message, context) ;}} public static void writeresultjson (INT resultno, string description, httpcontext context) {writeresultjson (resultno, description, context, "{statu E: '{0}', MSG: '{1}'} ");} public static void writeresultjson (INT resultno, string description, httpcontext context, string template) {description = clearbr (replacestring (description, "'", "|", false); context. response. write (string. format (template, resultno, description);} public static string clearbr (string Str) {RegEx r = NULL; match M = NULL; R = new RegEx (@ "(\ r | \ n)", regexoptions. ignorecase); (M = R. match (STR); M. success; M = m. nextmatch () {STR = Str. replace (M. groups [0]. tostring (), @ "\ n");} return STR;} public static string replacestring (string sourcestring, string searchstring, string replacestring, bool iscaseinsensetive) {return RegEx. replace (sourcestring, RegEx. escape (searchstring), replacestring, iscaseinsensetive? Regexoptions. ignorecase: regexoptions. None);} public bool isreusable {get {return false ;}}}

If you have any questions, please contact us online!

Attachment: Download the source code package and put it on the 20th floor. Click to download it!