How to send input value to php while ajax xml is passing compressed image using html canvas & file api

I was trying to pass multiple input values with Compressed base64 image,as ajax is passing images,I can't handle it properly, as I failed now need your suggestions. Below my codes are they will safely pass the image,but I need your help to pass multiple text values with it:

<!doctype html>
<html lang="en">
   <head>
      <title>Image Compress using HTML5 Canvas & File API before Upload</title>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <style type="text/css">
         img {
         border-width: 0
         }
         * {
         font-family: 'Lucida Grande', sans-serif;
         }
      </style>
   </head>
   <body>
      <style type="text/css">
         .block a:hover {
         color: silver;
         }
         .block a {
         color: #fff;
         }
         .block {
         position: fixed;
         background: #2184cd;
         padding: 20px;
         z-index: 1;
         top: 240px;
         }
      </style>
      <div>
         <hr />
         <p>
            <link href="bootstrap.min.css" rel="stylesheet">
         <div id="progress-bar"></div>
         <div id="result"></div>
         <div class="container">
            <div class="row">
               <div class="col-md-4 border">
                  <form id="upload_form">
                     <label for="file">Choose file</label>
                     <input type="file" id="fileinput" />
                     </script>
                  </form>
               </div>
               <div class="col-md-4 border">
                  <div class="thumbnail">
                     <img id="source_image" style="width:100%">
                     <div class="caption">
                        <p>
                           Source Image
                        </p>
                        <p>
                           <input type="button" id="compress" value="Compress" class="btn-primary" style="display: none;">
                        </p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 border">
                  <div class="thumbnail">
                     <img id="compressed_image" style="width:100%">
                     <div class="caption">
                        <p>
                           Compressed Image
                        </p>
                        <p>
                           <input type="button" id="upload" class="btn-success" value="Upload" style="display: none;">
                        </p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <script src="jquery-1.12.4.min.js"></script>
         <script src="JIC.js"></script>
         <script>
            var output_format = null;
            var file_name = null;
            function readFile(evt) {
            var file = evt.target.files[0];
            var reader = new FileReader();
            reader.onload = function(event) {
            var i = document.getElementById("source_image");
            console.log(i);
            i.src = event.target.result;
            i.onload = function() {
            $("#progress-bar").html('<div id="progress-status"> 10% Image Loaded</div>');
            console.log("Image loaded");
            }
            };
            output_format = file.name.split(".").pop();
            file_name = file.name;
            console.log("Filename:" + file.name);
            window.localStorage.setItem('name', file.name);
            console.log("Fileformat:" + output_format);
            console.log("Filesize:" + (parseInt(file.size) / 1024) + " Kb");
            console.log("Type:" + file.type);
            reader.readAsDataURL(file);
            $("#compress").show();
            return false;
            }
            // compress image
            $("#compress").click(function() {
            var source_image = document.getElementById("source_image");
            if (source_image.src == "") {
            alert("You must load an image first!");
            return false;
            }
            
            var quality = 90;
            
            console.log("process start...");
            console.log("process start compress ...");
            compressed_image.src = jic.compress(source_image, quality, output_format).src;
            $("#upload").show();
            
            });
            // upload imange
            $("#upload").click(function() {
            var compressed_image = document.getElementById("compressed_image");
            if (compressed_image.src == "") {
            alert("You must compress image first!");
            return false;
            }
            
            var successCallback = function(response) {
            console.log("image uploaded successfully! :)");
            console.log(response);
            }
            
            var errorCallback = function(response) {
            console.log("image Filed to upload! :)");
            console.log(response);
            }
            
            console.log("process start upload ...");
            jic.upload(compressed_image, "upload.php", "file", file_name, successCallback, errorCallback);
            
            });
            
            document.getElementById("fileinput").addEventListener("change", readFile, false);
         </script>
         <div style='margin-left: auto;margin-right: auto;text-align: center;'>
            <hr />
         </div>
      </div>
   </body>
</html>

Now The JIC.js

/*!
 * JIC JavaScript Library v2.0.2
 * https://github.com/brunobar79/J-I-C/
 *
 * Copyright 2016, Bruno Barbieri
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Date: Tue Jul 11 13:13:03 2016 -0400
 */


/**
 * Create the jic object.
 * @constructor
 */

var jic = {
    /**
     * Receives an Image Object (can be JPG, PNG, or WEBP) and returns a new Image Object compressed
     * @param {Image} source_img_obj The source Image Object
     * @param {Integer} quality The output quality of Image Object
     * @param {String} output format. Possible values are jpg, png, and webp
     * @return {Image} result_image_obj The compressed Image Object
     */

    compress: function (source_img_obj, quality, output_format) {

        var mime_type;
        if (output_format === "png") {
            mime_type = "image/png";
        } else if (output_format === "webp") {
            mime_type = "image/webp";
        } else {
            mime_type = "image/jpeg";
        }

        var cvs = document.createElement('canvas');
        cvs.width = source_img_obj.naturalWidth;
        cvs.height = source_img_obj.naturalHeight;
        var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
        var newImageData = cvs.toDataURL(mime_type, quality / 100);
        var result_image_obj = new Image();
        result_image_obj.src = newImageData;
        return result_image_obj;
    },

    /**
     * Receives an Image Object and upload it to the server via ajax
     * @param {Image} compressed_img_obj The Compressed Image Object
     * @param {String} The server side url to send the POST request
     * @param {String} file_input_name The name of the input that the server will receive with the file
     * @param {String} filename The name of the file that will be sent to the server
     * @param {function} successCallback The callback to trigger when the upload is succesful.
     * @param {function} (OPTIONAL) errorCallback The callback to trigger when the upload failed.
     * @param {function} (OPTIONAL) duringCallback The callback called to be notified about the image's upload progress.
     * @param {Object} (OPTIONAL) customHeaders An object representing key-value  properties to inject to the request header.
     */

    upload: function (compressed_img_obj, upload_url, file_input_name, filename, successCallback, errorCallback, duringCallback, customHeaders) {

        //ADD sendAsBinary compatibilty to older browsers
        if (XMLHttpRequest.prototype.sendAsBinary === undefined) {
            XMLHttpRequest.prototype.sendAsBinary = function (string) {
                var bytes = Array.prototype.map.call(string, function (c) {
                    return c.charCodeAt(0) & 0xff;
                });
                this.send(new Uint8Array(bytes).buffer);
            };
        }

        var type;
        if (filename.substr(-4).toLowerCase() === ".png") {
            type = "image/png";
        } else if (filename.substr(-5).toLowerCase() === ".webp") {
            type = "image/webp";
        } else {
            type = "image/jpeg";
        }

        var data = compressed_img_obj.src;
        data = data.replace('data:' + type + ';base64,', '');

        var xhr = new XMLHttpRequest();
        xhr.open('POST', upload_url, true);
        var boundary = 'someboundary';

        xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);

        // Set custom request headers if customHeaders parameter is provided
        if (customHeaders && typeof customHeaders === "object") {
            for (var headerKey in customHeaders) {
                xhr.setRequestHeader(headerKey, customHeaders[headerKey]);
            }
        }

        // If a duringCallback function is set as a parameter, call that to notify about the upload progress
        if (duringCallback && duringCallback instanceof Function) {
            xhr.upload.onprogress = function (evt) {
                if (evt.lengthComputable) {
                    duringCallback((evt.loaded / evt.total) * 100);
                }
            };
        }

        xhr.sendAsBinary(['--' + boundary, 'Content-Disposition: form-data; name="' + file_input_name + '"; filename="' + filename + '"', 'Content-Type: ' + type, '', atob(data), '--' + boundary + '--'].join('\r\n'));

        xhr.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    var welcome_message = '<p class="welcome-message">Welcome, successfull!</p>';
                    document.getElementById("progress-bar").innerHTML = welcome_message;
                    successCallback(this.responseText);
                } else if (this.status >= 400) {
                    if (errorCallback && errorCallback instanceof Function) {
                        errorCallback(this.responseText);
                    }
                }
            }
        };


    }
};

Upload.php,is simple

<?php

$target_dir = "uploads/";
move_uploaded_file($_FILES["file"]["tmp_name"], $target_dir.$_FILES["file"]["name"]);

?>

These Are my fully working code,I need your help to pass input values via ajax to upload.php so that I can insert data into database. One more thing, is it possible to show upload progress bar using jic.js?? As it has some portion

// If a duringCallback function is set as a parameter, call that to notify about the upload progress
if (duringCallback && duringCallback instanceof Function) {
    xhr.upload.onprogress = function (evt) {
        if (evt.lengthComputable) {
            duringCallback((evt.loaded / evt.total) * 100);
        }
    };
}

If yes,as you guyes are helpful to newbeis,I need your help to implement that too. Hope these codes will help you to understand my circumstances. Have a good day,& thanks in advance.