so I have a PHP iframe (ajax) file uploader. I would like to display a loading message when submit is clicked (easy on click event) and then once the file is uploaded, so when the iframe is loaded with the PHP response, vanish (jquery fadeOut) and an alert box pop up saying the file is uploaded. what would be the easiest way to go about this?
-
2Look at Valums file uploader.Tomas– Tomas2011-11-30 11:58:02 +00:00Commented Nov 30, 2011 at 11:58
-
I dnt want to use a plugin, Security is too much of a risk with plugins.David– David2011-11-30 12:23:36 +00:00Commented Nov 30, 2011 at 12:23
Add a comment
|
1 Answer
You can attach an event handler to load on the iframe and put your fade out logic in there.
Edit 2: Some sample code (changed from ready to load)
<iframe name="process"></iframe>
<form method="post" action="upload.php" target="process" enctype="multipart/form-data" onsubmit="Upload.start()">
<input type="file" name="file" />
<input type="submit" value="Upload" />
</form>
<script>
var Upload = function() {
$(function() {
$('iframe[name=process]').load(function() {
// finished uploading file
$('.loading-div').hide('slow', function() {
alert('Your file has been successfully uploaded.');
});
});
});
return {
start: function() {
$('.loading-div').show();
}
}
}();
</script>
