squigs Posted August 23, 2012 Share Posted August 23, 2012 Now that I have created a nice form working with multiple file attachments I would like to add a progress bar to the file uploads. I should've had enough foresight to see the roadblocks coming! My first issue is that I am on a shared hosting plan which means I do not have ssh access (although I did at one time) but also I cannot use the most commonly suggested solutions ie. pecl extensions and apc. This leaves me with the options of upgrading to a plan 3X the cost I am currently paying to upgrade to vps hosting, dedicated servers or using flash. I was trying to avoid the flash solution but decided to settle with it for the time being. I apologize for the long winded introduction but needed to vent it somewhere :-\ I am now trying to implement uploadify into my script and am having some difficulty with it. Is there anyone here who has experience in this issue or has suggestions of possible better solutions? If so I would certainly appreciate the help! Cheers Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/ Share on other sites More sharing options...
xyph Posted August 23, 2012 Share Posted August 23, 2012 I'd suggest Plupload. I've used it many times, and it's extremely customizable. They have a great default interface, but the API is powerful enough to create your own custom look and feel (assuming you know a little JS) with ease. http://www.plupload.com/example_custom.php Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1371968 Share on other sites More sharing options...
squigs Posted August 24, 2012 Author Share Posted August 24, 2012 (assuming you know a little JS) Very little... but what better way to learn Thanks, I'll check it out! Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1371982 Share on other sites More sharing options...
squigs Posted August 24, 2012 Author Share Posted August 24, 2012 It appears as though this code will do what I need it to but I have several questions about how I could make it work with my current form. For example: I have already set restrictions and such in my php form but they appear to be repeated in the javascript. If I remove an option such as: filters : [ {title : "Image files", extensions : "jpg,gif,png"}, {title : "Zip files", extensions : "zip"} ], from the javascript will it break the rest of the script? Should I try to strip it down in this manner? Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1372013 Share on other sites More sharing options...
xyph Posted August 24, 2012 Share Posted August 24, 2012 Those are client-side checks only. They aren't required, but they're nice to have. Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1372028 Share on other sites More sharing options...
squigs Posted August 26, 2012 Author Share Posted August 26, 2012 I've been playing around with the code from the link that was posted and have managed to change many variables but am having difficulties in implementing it in my form which adds files in the following manner. http://jsfiddle.net/schwiegler/NbDsy/7/ Also after I implement the code the former functionality of my submit button no longer works. Would it be straight forward enough to use multiple file inputs, display the file info underneath the input and have either one progress bar per file or one bar displaying total progress and percentages next to individual files? Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1372741 Share on other sites More sharing options...
squigs Posted August 27, 2012 Author Share Posted August 27, 2012 I am beginning to think that a progress bar is a little too complex of a solution for me at this time unfortunately. I have a working form that supports multiple files and although a progress bar would be beneficial for the user I am now thinking of just adding a visual element to notify users that an upload is occurring. I was thinking of something as simple as: "Please be patient while files are uploading..." and have the dots at the end of the statement animated for a timed interval. eg. 1...2...3...1...2...3... does that make sense? If anyone can steer me towards a solution for this one it would be a head start for me. Thanks Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1372842 Share on other sites More sharing options...
codefossa Posted August 27, 2012 Share Posted August 27, 2012 Something like this? http://xaotique.no-ip.org/tmp/3.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Temporary Page</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript"> window.addEventListener("load", function() { var cnt = window.document.getElementById("wait"), i = 0; setInterval(function() { var num = i % 4; cnt.innerHTML = "Please wait while files are uploading"; for (var x = 0; x < num; x++) { cnt.innerHTML += "."; } i++; }, 1000); }, false); </script> </head> <body> <span id="wait">Please wait while files are uploading...</span> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1372851 Share on other sites More sharing options...
squigs Posted August 27, 2012 Author Share Posted August 27, 2012 Something like this? http://xaotique.no-ip.org/tmp/3.php Ya, that's awesome, it will come in handy for other things as well. I also found a nice little setup that can be found at http://www.ryantetek.com/2009/06/animated-progress-loading-bar-upon-form-submit-javascript/ These are a trade-off for what I was really looking for but will suit for the time being hopefully down the road the progress bar will be easier implemented on shared hosts. Cheers Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1372910 Share on other sites More sharing options...
xyph Posted August 27, 2012 Share Posted August 27, 2012 A much easier way is to just use an animated GIF over changing text. Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1372950 Share on other sites More sharing options...
squigs Posted August 27, 2012 Author Share Posted August 27, 2012 A much easier way is to just use an animated GIF over changing text. It would be for sure! Nice to see how it could be done textually though, in helping me learn a thing or two. One problem I run into now is that by onClick the animation begins instantly regardless of my form validation! Could I somehow check my page validation prior to the function being executed? As per the link I posted, this is the code I'm working with: function loadSubmit() { var ProgressImage = document.getElementById('progress_image'); document.getElementById("progress").style.visibility = "visible"; setTimeout(function(){ProgressImage.src = ProgressImage.src},100); return true; } Thanks Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1372973 Share on other sites More sharing options...
squigs Posted August 28, 2012 Author Share Posted August 28, 2012 I have posted a continuation to this in a new topic as it is no longer relevant here. Marking this as solved although I hope an actual solutions arises soon! Quote Link to comment https://forums.phpfreaks.com/topic/267504-upload-progress-bar/#findComment-1373080 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.