I am trying to stringify textbox input data and uploaded images in json format to send through ajax.but getting error at alert(file[0].name + " is not a valid image file.");
and at this point in ajax part data: '{user: "' + JSON.stringify(user) + '",byteData: "' + byteData + '", imageName: "' + fileName + '", contentType: "' + contentType + '" }',

Given below is the script which is accepting value from textboxes, labels and image upload control and then stringify all the values and passing it through Ajax in json Format.
enter image description here

<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
    $(function () {
        var reader = new FileReader();
        var fileName;
        var contentType;
        $("#pdfForm").on('change', 'input[name=flImage]', function () {
            alert('Thanks for selecting image');
            if (typeof (FileReader) != "undefined") {
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                $($(this)[0].files).each(function () {
                    var file = $(this);
                    if (regex.test(file[0].name.toLowerCase())) {
                        fileName = file[0].name;
                        contentType = file[0].type;
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });
        $(document).on("click", "[id*=btnFrmSubmit]", function () {
            alert("hi");
            var user = {};
            user.PRODUCT_ID = 1;
            user.TDC_NO = $("[id*=Tdc_No]").val();
            user.REVISION = $("#Revision").text();
            user.REVISION_DATE = $("[id*=Revision_Date]").text();
            user.P_GROUP = $("[id*=P_Group]").val();
            user.PROD_DESC = $("[id*=Prod_Desc]").val();
            user.N_I_PRD_STD = $("[id*=N_I_Prd_Std]").val();
            user.APPLN = $("[id*=Appln]").val();
            user.FRM_SUPP = $("[id*=Frm_Supp]").val();
            user.CREATED_DATE = $("#Revision_Date").text();
            user.CREATED_BY = $("[id*=lblUserName]").text();
            var byteData = reader.result;
            console.log(byteData);
            byteData = byteData.split(';')[1].replace("base64,", "");
            $.ajax({
                type: "POST",
                url: "TDC.aspx/SaveFrmDetails",
                data: '{user: "' + JSON.stringify(user) + '",byteData: "' + byteData + '", imageName: "' + fileName + '", contentType: "' + contentType + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert("User has been added successfully.");
                    window.location.reload();
                }
            });
            return false;
        });
    });
</script>

For ajax file upload, it is better to use Formdata refer the link below

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Hope this helps. Please feel free to ask for any clarifications