Member Avatar for davil

I found a great client side image resize solution:

but the free version doesn't have form integration, so I copied some ajax code off the internet and integrated it into my PHP - so it

just keeps checking for a specific file to be uploaded and then the PHP just echos 'success' and if the ajax sees that it redirects to

another page to continue the process

Here's the JS (Jquery obviously)

$(document).ready(function()
{
   //filecheck.php is called every 2 seconds to ask server if file has been uploaded yet
   var refreshId = setInterval(function()
   {
   $('#Davfilecheck').load('scripts/filecheck.php');
   
   var fc1 = new String();
   fc1 = document.getElementById('Davfilecheck').innerHTML;

if (fc1 == "Success!"){
alert ("The photo has been successfully uploaded to the site. Click OK to enter details for photo");
window.location="index.php?locate=upload&filedone=yes";
}


   }, 2000);

});

And here's the 'filecheck.php' code

<?php
if (file_exists('../secure/uploads/uploadfile')){echo "Success!";}
?>

This system works great with most newer browsers but when the file is uploaded in IE6 the JS doesn't seem to notice.

I will upload my main PHP script if necessary but I'm pretty sure this is the part that won't work in IE6.

Is the only option to ask the users to upgrade browser or is there a hack for getting this to work in IE6 ?

P.S. I've also noticed lately that on some browsers the code loops around a second time, causing problems. It must be terrible code - I'm sorry but my PHP coding is a lot better than my JS coding. :-D

If anybody knows a more efficient way to do this I would really appreciate it.

Thanks

Edited by davil because: n/a
  • 2 Contributors
  • 3 Replies
  • 602 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

A few practical points to close the loop on this thread (good work, ; ’s direction was right).

IE6 can and does support AJAX, but it aggressively caches GET XHR responses and can serve a cached copy without re-contacting your server — that will make a polling .load() appear to “not notice” the new file. Also, using setInterval() to poll can create overlapping/queued requests when a prior request hasn’t completed. Those two things are the most common causes of the behaviour you saw. (dashbay.com)

A practical, minimal fix that avoids both problems is:

  • use jQuery’s $.ajax with caching disabled (or append a timestamp param) so IE won’t return a cached response,
  • schedule the next poll from the AJAX callback (chained setTimeout) so you never fire a new request while a previous one is still in flight,
  • and compare a trimmed, well-defined server token (or better: return JSON). Example poll pattern (replace the status string with whatever your PHP returns):
(function pollFile(){
  $.ajax({
    url: 'scripts/filecheck.php',
    method: 'GET',
    cache: false,        // jQuery adds a timestamp param for GETs
    dataType: 'text',
    timeout: 15000
  }).done(function(resp){
    resp = $.trim(resp);
    if (resp === 'ready') {
      window.location = 'index.php?locate=upload&filedone=yes';
      return;
    }
  }).always(function(){
    setTimeout(pollFile, 2000);
  });
})();

Using cache: false is the supported jQuery way to avoid browser caching on GETs. (api.jquery.com)

Server-side: return a small, deterministic payload (plain text token or JSON) and send no-cache headers so proxies and browsers don’t keep stale copies. For PHP, set Content-Type and Cache-Control/Pragma/Expires appropriately, and avoid extra whitespace/newlines around the response (they break simple string checks). If you want robust behaviour across browsers, move to a JSON status response and check dataType: 'json' on the client. (mnot.net)

Longer term: stop polling the client and use a proper upload flow. For modern browsers use FormData/XHR2; for legacy browsers (IE6) use a tried-and-tested plugin that provides iframe fallback and progress handling (examples: Malsup’s jQuery Form plugin and the blueimp jQuery File Upload widget). These handle the quirks for you and will be more reliable than rolling your own polling loop. (malsup.com)

Summary checklist to try now

  • switch polling code to the pattern above (no setInterval),
  • use cache:false or a timestamp param,
  • trim/parse the response (or use JSON),
  • add no-cache headers server-side,
  • consider a file-upload plugin for cross-browser fallback.

Recommended Answers

All 3 Replies

Member Avatar for Airshow

Davil,

IE6 certainly does do AJAX.

I think you would be better off avoiding setInterval().

Better to make your "upload" http request into an AJAX call, with a response handler that simply displays (or alerts) the response string.

You will then need to arrange for a php page to handle the upload request and to return "success"|"fail"|"timeout"|whatever.

Thus, all the "has it finished yet" testing is coordinated server-side, not client-side. Much simpler.

Airshow

Member Avatar for davil

Hmmm... I've been doing some googling and got it working (at least it looks like it's working) -

if (!XMLHttpRequest) {
  window.XMLHttpRequest = function() {
    return new ActiveXObject('Microsoft.XMLHTTP');
  }
}

I put that code in before my own and it seems to be working. I only half understand what you're saying Airshow and I'll try to get to grips with it because I want the site to be as efficient and cross browser as possible. Thanks

Member Avatar for Airshow

Davil,

You shouldn't need that code in your last post id you are using jQuery, which has AJAX support built in. See the jQuery API to see how to drive it.

Slight change of direction cw. my earlier post ...

From what I have read, a lot of people choose to use one of several jQuery plugins to handle a file upload (enctype="multipart/form-data" ). These plugins make life easier than trying to work with raw jQuery and (if you choose the right one) will handle feedback to the user on progress.

jQuery plugins tend to be well documented and there's every chance you will find one with sample php to demonstrate what is required server-side.

I'm afriad you will need to do some research yourself as I only know in principle about this aspect of jQuery - I have never done it for real.

Airshow

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.