问题
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!
回答1:
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.
来源：https://stackoverflow.com/questions/12673568/jquery-doesnt-run-in-safari-on-form-submit