Issue on Renaming Image File On Upload Using jQuery Ajax

Issue on Renaming Image File On Upload Using jQuery Ajax

I am trying to Rename an image when uploading it. I have a text field with id of   newName  now I would like to pass it into  FormData ( )  and over write it on the file name in the PHP file
Here is the the code I have  

<input type="text" id="newName" />
$(document).ready(function (e) {
var newName = $("#newName").val(); $('#imageUploadForm').on('submit',(function(e) {       e.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); } }); })); $("#ImageBrowse").on("change", function() { $("#imageUploadForm").submit(); }); });
Can you please let me know how to do it?

Thanks