Jquery ajax page is automatically redirecting on post request

Question

Trying to upload multiple files through ajax but after uploading its redirecting to another blank page automatically, showing only the name of upload files

Following is the html tag

Here is the javascript function

function upload(){

 var projectId = document.getElementById("projectId").children[0].value;
   var referenceNo = document.getElementById("referenceNo").value;
   var createdBy = document.getElementById("initiatedBy").value;
if(projectId == null)
{
    alert('Please select project first');
    return;
}

var formData = new FormData();
var imageFiles = document.getElementById("fileId"),
filesLength = imageFiles.files.length;
for (var i = 0; i < filesLength; i++) {
  document.write(imageFiles.files[i].name);
    formData.append('files',imageFiles.files[i]);   

}

$("#fileId").val('');

var methodName = 'uploadBPMFiles';
formData.append('refId',referenceNo);   
formData.append('projectId',projectId);
formData.append('uploadedBy',createdBy);
formData.append('processType','EOT');

$.ajax({
    url: webUrl+methodName,
    data: formData,
    processData: false,
    type: 'POST',
    cache:false,
    dataType: "json",  
    contentType: false, 
    enctype     : "multipart/form-data",
    success: function(responseData) {
    alert('success');
    /**console.log('responseData: '+responseData);
    console.log('responseData: '+responseData);
    var obj = (responseData.downloadURLs);
    console.log(obj)
    for (var i in obj) {
      console.log(obj[i]);
      //$("response")<a href="http://www.test.com/b6">World</a>
      //$('#response').append('<a href="'+obj[i]+'">Link</a>');

    }
    //console.log($('#response').val());
    //console.log('end');   
**/
    }   
    ,
    error: function (responseData) {
        console.log('POST failed.');
    }
  });

}

Answer 1

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.

document.write(imageFiles.files[i].name); will clear your document. You have to append a new Element with the names of your files to display them on your site. To do this you can create a new Element using jQuery

$("<span>").text(imageFiles.files[i].name).appendTo("body");

Answer 2

Actually I was writing the uploaded file names in document. So i've removed the below line

document.write(imageFiles.files[i].name);