Home/ Questions/Q 8612671
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T04:41:07+00:00

I have a peculiar issue which is giving me headaches… The following code works

  • 0

I have a peculiar issue which is giving me headaches… The following code works perfectly in Firefox but not in Safari on Mac OS.

I want to display a simple “Loading message” while files are being uploaded. So my page looks like this:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $('#upload').on('submit', function () {

                    $("#loading").fadeIn();

                });

            });
        </script>
    </head>

    <body>
        <p id="loading" style="display:none">UPLOADING...</p>


            <form name="upload" id="upload" method="post" action="upload.php" enctype="multipart/form-data">
                <input type='file' name='file[]' multiple/>
                <input type="submit" value="Upload..."/>
            </form>

    </body>
</html>

On Firefox, the “UPLOADING…” line shows up while the files are uploading before transfering me to upload.php. On Safari, the “UPLOADING…” line doesn’t show and it transfers me to upload.php once the files are uploaded.

If this is something not supported in Safari, how can I achieve exactly the same feature?

Thank you for your help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, I got it working…

    Instead of a ‘submit’ button, I changed it by a ‘button’ with id=’send’. I modified the script to first show the p tag on click and then added the form submit in the callback like so:

    <script>
            $(document).ready(function () {

                $("#send").click(function () {

                    $("#loading").fadeIn(function () {
                        $("#upload").submit();
                    });

                });

            });
</script>

    And it works in all browsers now. Tested in IE, FF, Chrome and Safari.

    • 0