How to submit form in JSP using JavaScript and AJAX?

Question

I have a form, in that, I have various fields including an image. Basically, I am trying to submit the product image including other fields and I used AJAX to submit the form. But I am facing an issue doing that. I do not know where I am doing wrong. Please if any suggestion, would be appreciated.

<form id="addproductform" name="addproductform" enctype="multipart/form-data">
<input type="button" class="btn btn-outline-danger mt-4" value="Submit" onclick="addproduct()">
    
    function addproduct(){
            var productname = document.getElementById('productname').value;
            var category = document.getElementById('categorydd').value;
            var subcategory = document.getElementById('subcategorydd').value;
            var tag = document.getElementById('tagsdropdown').value;
            var skucode = document.getElementById('skucode').value;
            var productimg = document.getElementById('imagepath').value;
            var url = "../api/products";
            console.log(url);
            $.post(url,{
                productname : productname,
                category : category,
                subcategory : subcategory,
                tag : tag,
                skucode : skucode,
                productimg : productimg,
            },function(data, status) {
                if (data.status == "OK") {
                    if (data.statusCode == 1) { 
                        $('#addproductform').submit();
                    }else {
                        var error = data.responseMessage;
                        swal(error, "", "error");
                    }
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            });
        }