Jquery and BigFileUpload implement big file upload and progress bar display, fileupload upload progress bar

Jquery and BigFileUpload implement big file upload and progress bar display, fileupload upload progress bar

Implementation Method: The bigfileupload component of mountain laike is used. A mode window pops up using the mountain laike method, and the progress is continuously refreshed. the user experience is poor, therefore, jquery is used to display the progress without refreshing the page, because after submitting the page, the page cannot be refreshed, but the progress is continuously obtained through ajax. the progress information returned by aspx, so jquery is used. form. After the ajaxform is submitted, if the submitted event is executed, such as inserting records in the database, it is still being debugged.

1. jquery progressbar, form, MultFile and related components are used.

<Script src = ".. /.. /common/js/jquery-1.2.6.pack.js "type =" text/javascript "> </script> <script src = ".. /.. /common/jqControl/packed/ui. core. packed. js "type =" text/javascript "> </script> <! -- FORM --> <script src = ".. /.. /common/jqControl/ajax/jquery. form. js "type =" text/javascript "> </script> <! -- Upload a file --> <script src = ".. /.. /common/jqControl/upLoad/jquery. multiFile. pack. js "type =" text/javascript "> </script> <! -- Progress bar --> <script src = ".. /.. /common/jqControl/packed/ui. progressbar. packed. js "type =" text/javascript "> </script> <! -- Dialog box --> <! -- My JS --> <link href = ".. /.. /common/Css/jquery-ui-themeroller.css "rel =" stylesheet "type =" text/css "/> <script src = ".. /gadget/JS/uploadfile. js "type =" text/javascript ">

 

2. The uploadfile. js code is as follows:

$ (Function () {var info = '<div style = "display: none" id = "uploadinfo">'; info + = '<p> uploading: <span id = "uploadfilename"> </span> </p> '; info + =' <p> upload speed: <span id = "uploadrate"> </span> </p> '; info + =' <p> Status: <span id = "uploadtitle"> </span> </p> '; info + =' <p> estimated remaining time: <span id = "uploadlefttime"> </span> </p> '; info + =' <p> size of the uploaded file: <span id = "uploadtotal"> </span> </p> '; info + =' <p> uploaded size: <span id = "uploadcurrent"> </span> </p> '; info + = '<p> <div id = "uploadprogressbar"> </div> </p> '; info + = '</div> <div id = "dialogsucc">'; $ ("body "). append (info); // progress bar $ ("# uploadprogressbar "). progressbar (); // upload $ ('# fileupload '). multiFile (); $ ('# btshow '). click (function () {alert ($ ("body" example .html () ;}); // submit $ ('# btnsubmit '). click (function () {$ ("# uploadForm "). ajaxSubmit ({dataType: 'text', beforeSubmit: function (a, f, o) {startProgress () ;}, async: false, success: function (data) {// $ ("# dialogsucc "). text (data); // stopProgress (); if (data. succ = 1) {/* $ ("# dialogsucc "). show (); $ ("# dialogsucc "). dialog ({modal: true, overlay: {opacity: 0.5, background: "black" }}); */}, error: function (err) {alert (err) ;}}) ;}); function getProgress. ajax ({type: "post", dataType: "json", url: "uploadProgress. aspx ", data:" UploadID = "+ $ (" # UploadID "). val (), success: function (data) {$ ("# uploadprogressbar "). progressbar ("progress", data. percent); $ ("# uploadfilename" pai.html (data. filename); $ ("# uploadrate" pai.html (data. rate); $ ("# uploadtitle" ).html (data.info); $ ("# uploadlefttime" ).html (data. lefttime); $ ("# uploadtotal" pai.html (data. total); $ ("# uploadcurrent" pai.html (data. current); if (data. succ =-1) {alert (data. errmsg);} if (data. succ = 0) {setTimeout ("getProgress ()", 1000);} if (data. succ = 1) {return ;}, error: function (msg) {alert (msg) ;}}) ;} function startProgress () {$ ("# uploadinfo "). show (); setTimeout ("getProgress ()", 500);} function stopProgress () {$ ("# uploadinfo "). hide ();}

3: The progress. aspx code is as follows:

Protected void Page_Load (object sender, EventArgs e) {try {string s = "{"; UploadContext upload = UploadContextFactory. getUploadContext (Request ["UploadID"]); // initialize if (upload. status = uploadStatus. initializing) {s + = responeJSON (upload, "0", "");} if (upload. status = uploadStatus. uploading) {s + = responeJSON (upload, "0", "");} if (upload. status = uploadStatus. complete) {s + = responeJSON (upload, "1", "");} if (upload. status = uploadStatus. hasError) {s + = responeJSON (upload, "-1", "");} s + = "}"; Response. write (s);} catch (Exception err) {// throw err; Response. write ("{'info': '" + err. message. replace ("'", "") + "', 'succ':-1}") ;}} private string responeJSON (UploadContext upload, string succ, string errmsg) {string s = ""; s + = "'info': '" + upload. formatStatus + "'"; s + = ", 'percent': '" + Convert. toInt32 (upload. readedlength * 100.0/upload. totalLength )). toString () + "'"; s + = ", 'current':'" + (upload. readedlength/1024 ). toString () + "KB '"; s + = ", 'Total':'" + (upload. totalLength/1024 ). toString () + "KB '"; s + = ", 'rate':'" + upload. formatRatio + "'"; s + = ", 'filename':'" + upload. currentFile + "'"; s + = ", 'cel _ upload':" + 0; s + = ", 'lefttime':'" + upload. leftTime + "'"; s + = ", 'succ':" + succ; s + = ", 'errmsg': '" + errmsg + "'"; return s ;}

4. After ajaxForm is executedAfter uploading files, how can I perform other operations?

The above is a small series of Jquery and BigFileUpload implementation of large file upload and progress bar display, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!