AJAX loading gif
I created a php script to allow upload of an image, together with resize and thumbnail creation.
This works fine, but the person I am doing it for would like a visual indicator that the upload is in progress.
Using the YUI tools, and looking at some other forums, I managed to piece together a working sample, but i am struggling a bit with the javascript.
The problems arise with the upload handler.
When using ff, i don't get any problems, but with ie i get a response popup with lots of text.
attached is the relevant js code. If anyone can give me a few pointers I would be very grateful
var $E = YAHOO.util.Event;
var $ = YAHOO.util.Dom.get;
var $D = YAHOO.util.Dom;
function init(){
var onUploadButtonClick = function(e){
//the second argument of setForm is crucial,
//which tells Connection Manager this is a file upload form
YAHOO.util.Connect.setForm('uploadImage', true);
var uploadHandler = {
upload: function(o) {
$D.setStyle('indicator', 'visibility', 'hidden');
alert(o.responseText);
}
};
$D.setStyle('indicator', 'visibility', 'visible');
YAHOO.util.Connect.asyncRequest('POST', 'uploadcode.php', uploadHandler);
document.uploadImage.upload.disabled = true;
document.uploadImage.upload.value = "Uploading...";
};
YAHOO.util.Event.on('upload', 'click', onUploadButtonClick);
}
YAHOO.util.Event.on(window, 'load', init);
</script>