php - Session Upload Progress with JQuery -


I'm trying to convert which uses pure Javascript to a JQuery counterpart.

The problem is that whenever I press the upload button, it toggles the progress bar for the duration of the setTimeout function (1 second), then it disappears And "real" has never shown any real progress due to me being displayed.

I am using PHP> 5.4 I have session.upload_progress.enabled = ON I am uploading a large file I know that even if it is done locally Should take several seconds in.

HTML:

  & lt ;! DOCTYPE html & gt; & Lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" /> & Lt; Script type = "text / javascript" src = "// code.jquery.com/jquery-latest.min.js"></script> & Lt; Style & gt; #progress_bar {border: solid 1px # 000; Height: 20px; Width: 300px; display none; } #bar_color {background-color: # 006666; Height: 20px; Width: 0 pixels; } & Lt; / Style & gt; & Lt; Title & gt; File upload progress bar & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "progress_bar" & gt; & Lt; Div id = "bar_color" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "upload_status" & gt; & Lt; / Div & gt; & Lt; Form id = "uploadform" enctype = "multipart / form-data" & gt; & Lt; Input type = "hidden" name = "& lt ;? php echo ini_get ('session.upload_progress.name') ;? & gt;" Value = "upload form" /> & Lt; Input type = "hidden" name = "MAX_FILE_SIZE" value = "9999999" /> & Lt; Input type = "file" name = "file" /> & Lt; Br / & gt; & Lt; Input type = "submit" value = "upload" / & gt; & Lt; / Form & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

JQuery:

  & lt; Script & gt; $ (Document) .ready (function () {var interval; // update status bar $ ("# upload form"). Submit (function (e) {e.preventDefault (); $ ('# progress_bar'). Toggle (); Interval = setInterval (function () {$ .ajax ({cache: false, url: "status.php", type: "GET"}) .done (function) {if (response) { $ ('(' + '%'); $ ('# Upload_status'). Html (feedback + '%'); if (response & lt; 100) {set interval (interval, 1000);} and {$ ( '#progress_bar') Toggle (); $ ('# bar_color') width (0 + 'px'); $ ('# upload_states') .html ('full'); clear interval (difference) );}}}}};}, 1000);});}); & lt; / script & gt;  

PHP:

  <$ Php session_start (); $ Key = ini_get ('session.upload_progress.prefix'). 'UploadForm'; if (! Empty ($ _ session [$ key])) {$ current = $ _SESSION [$ key ] ['Byte_processed']; $ total = $ _SESSION [$ of] ['content_length']; copy current $ l0; $ total? Limit ($ current / $ total * 100): 100;} Else {echo 100; }  

Where am I going?

Upload the file with AJAX and update the progress bar while updating, when this is complete Go.

  $ ('input [type = file]'). Change (function () {var fd = new form data (); fd.append ('file', $ ('input [type] = file]'). (0). Files [0]); $. Url: '.', Type: 'post', process data: wrong, data: fd, xhr: function () {var xhr = $ .ajaxSettings.xhr (); xhr.upload.addEventListener ('progress', function Cv ('width', (ev.loaded / (ev.total / 100) css ('width', '0%');}, success: work ()); } ('' '' '';}, False); back to the excer;}, before: work () {$ ('bar'). {Warning ('done');}});});  

Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -