I have a form that i want users to upload a form containing an image file with,The form is submitted using ajaxSubmit() method (to a php file that creates thumbnails). Everything is working fine in Firefox and Chrome and the processed thumbnail is being returned for user confirmation upon which it is then inserted to a database. The problem is that it doesn't work with internet Explorer!. After the submit button is clicked, the loading image pops up and doesn't get away.in short,it seems that the ajaxSubmit doesn't work.
Here is my form
<form action="http://localhost/thumbnail/nail1.php" method="POST" enctype="multipart/form-data" id="MyUploadForm"> <input name="ImageFile" id="imageInput" type="file" /> <div id="output" style="color:white; fontsize:20px; background-color:blue;"></div> <input type="submit" id="submit-btn" value="Upload" /> <img class="img-responsive" src="http://localhost/picha/aja.gif" id="loading-img" style="display:none;" alt="Please Wait" width="20px" height="20px"/> </form>
And my script to verify: file size, not empty.(The verification functions are ok)
$(document).ready(function() { var options = { target: '#output', // target element(s) to be updated beforeSubmit: beforeSubmit, // pre-submit callback success: afterSuccess, // post-submit callback resetForm: true // reset the form after successful submit }; $('#MyUploadForm').submit(function() { $(this).ajaxSubmit(options); return false; }); }); function afterSuccess() { $('#loading-img').hide(); //hide submit button } //function to check file size before uploading. function beforeSubmit(){ //check whether browser fully supports all File API if (window.File && window.FileReader && window.FileList && window.Blob) { if( !$('#imageInput').val()) //check empty input filed { $("#output").html("No file selected..."); return false } var fsize = $('#imageInput')[0].files[0].size; //get file size var ftype = $('#imageInput')[0].files[0].type; // get file type //allow only valid image file types switch(ftype) { case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg': break; default: $("#output").html("<b>"+ftype+"</b> Unsupported file type!"); return false } //Allowed file size is less than 1 MB (1048576) if(fsize>1048576) { $("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor."); return false } $('#submit-btn').hide(); //hide submit button $('#loading-img').show(); //hide submit button $("#output").html(""); } else { //Output error to older unsupported browsers that doesn't support HTML5 File API $("#output").html("Please upgrade your browser!"); return false; } } //function to format bites bit.ly/19yoIPO function bytesToSize(bytes) { var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes == 0) return '0 Bytes'; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]; }
Thanks in advance