Question

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?

Answer 1

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>