$(function (e) { $('#imgUploadForm').on('submit',(function(event) { event.preventDefault(); var formData = new FormData(this); $.ajax({ type:'POST', url: $(this).attr('action'), data:formData, cache:false, contentType: false, processData: false, success:function(data){ console.log("success"); console.log(data); }, error: function(data){ console.log("error"); console.log(data); } }); })); $("#ImageBrowseField").on("change", function() { $("#imageUploadForm").submit(); }); });
Here is the form
<form name="photo" id="imgUploadForm" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> <input type="file" style="widows:0; height:0" id="ImageBrowseField" hidden="hidden" name="image" size="30"/> <input type="submit" name="upload" value="Upload" /> <img width="100" style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail"/> </form>
Hoping it helps