Bootstrap custom Choose File upload

Bootstrap custom Choose File upload

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel-body">
  <div class="input-group">
   <!--  <input id="uploadFile" class="form-control" placeholder="Choose File" disabled="disabled"> -->
    <div class="input-group-btn">
      <div class="fileUpload btn btn-success">
        <span>Upload</span>
        <input id="file_1" type="file" class="upload" />
      </div>
    </div>
  </div>
</div>

CSS

.fileUpload {
    position: relative;
    overflow: hidden;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

JavaScript

document.getElementById("file_1").onchange = function () {
    console.log("value:" + this.value)
    var data;
        
        event.stopPropagation();
        event.preventDefault();

        data = new FormData();
        data.append('file_1', $('input[id="file_1"]')[0].files[0]);
        

        // Ajax to post the form
        $.ajax({
            url: 'http://192.168.1.107/travel/importExcelList',
            type: 'POST',
            data: data,
            cache: false,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function (json) {
                console.log(json);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + data.error);
            }
        });
};