styled input (type=file) submitting upon click with jquery .change event for reading selected files

Question

I have been debugging this for quite some time already, but to no avail.

Works perfectly fine on Google chrome but not on other browsers. On other browsers, upon click on the " Add Attachment " button, the page submits ( w/c is clearly not supposed to happen as file upload should happen async )

HTML CODE:

<form id="upload-form" method="POST" enctype="multipart/form-data" class="">
    <button class="btn btn-outline btn-default btn-sm  btn-file">
        <span class="glyphicon glyphicon-plus"></span> Add Attachment <input id="select-file" type="file" name="file[]" multiple />
    </button>
    <button id="upload-file" class="btn btn-outline btn-default btn-sm">
        <span class="glyphicon glyphicon-upload"></span> Upload
    </button>
</form>

JQuery CODE:

var ajaxRequest = function(type, url, data){
$.ajax({
      type: type,
      url: url,
      xhr: function(){
          var myXhr = $.ajaxSettings.xhr();
          if(myXhr.upload){
              myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
          }
          return myXhr;
      },
      data: data,
      success: function(data, status){
          if(data.status == true){
              $("#upload-result").addClass('font-green')
              $("#upload-result").html(data.text);
              setTimeout(function(){removeUploadPreviewDOM();}, 1500);
              setTimeout(function(){location.reload(true);}, 500);
          }else{
              $("#upload-result").addClass('font-red')
              $("#upload-result").html(data.text);
              $("#upload-form").trigger('reset');
              removeUploadPreviewDOM();
          }
          //setTimeout(function(){location.reload(true);}, 1500);
      },
      error: function(xhr, status, err){
          alert(status + ': ' + err );
      },
      cache: false,
      contentType: false,
      processData: false
 });

$("#select-file").change(function(){
    var files = this.files;
     Files = files;
     for(i=0; i<files.length; i++){
        readFile(files[i]);
     }
});

function readFile(file) {
  if(window.FileReader){
     var reader = new FileReader();
     reader.onload = function (e) {
         var oPreviewDiv = $( '#upload-preview' );
         var aFile = [e.target.result, file.name, (file.size/1024), file.type];
         var oFileUploadBox = singleFileInfoBox(aFile);
         oPreviewDiv.append(oFileUploadBox);
     };
     reader.readAsDataURL(file);
  }
}

$("#upload-file").click(function(e){
   e.preventDefault();
    var currUrl = window.location.toString();
    var ticketno = currUrl.substr(currUrl.lastIndexOf("/")+1,12);

    var type = 'POST';
    var url  = sUrl + 'upload_file/' + ticketno;
    var data = new FormData($("#upload-form")[0]);

    //SHOW/CREATE PROGRESS BAR BEFORE AJAX REQUEST
    generateProgressPreview();

    ajaxRequest(type, url, data);
});

Answer 1

Ooopss.. I just found out the answer to my own question. Aparently there is no problem with the jquery codes, the problem is the mark up.

by default button tags, submits the page to the server and since the input type=file is with in the button tags, it submits the page.

to correct the problem i did this.

<span class="btn btn-outline btn-default btn-sm  btn-file">
    <span class="glyphicon glyphicon-plus"></span> Add Attachment <input id="select-file" type="file" name="file[]" multiple />
</span>

Hopes this help to others too, who might encounter the same problem.