Problem with Jquery .html inside form

JavaScript
1

Hi all,

I have a form for uploading images to my website (you can see it at the url in my signature). I’m trying to show a spinner graphic whilst the image is uploading. I have the following and I’m just wondering what I’m doing wrong

The html:


          <form name="new_photo" method="post" id="new_photo_upload" action="------.php" enctype="multipart/form-data">
              <input name="filename" type="file">

            <p class="submit">					
              <input type="submit" name="submit" value="Upload Photo" />
            </p>  
            </form>          

          <div id="upload_progress"></div>

Then in javascript/ jquery I have the following:


      $('#new_photo_upload').submit(function() {
          $("#upload_progress").empty().html('<p><img src="imgs/ajax-loader2.gif" /><p>');
          $('#new_photo_upload').submit();
      });

In Chrome, the graphic (ajax-loader.gif) doesnt show at all whilst in firefox, a place holder shows as if the link is incorrect (but its not). Its almost as if the page is frozen until the file is uploaded???

2

Any takers on this?