Trying to stringify textbox input data and uploaded images in json format to send through ajax

问题内容:

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>

问题评论:

    
what error? Could you add fiddle? data: is allowed to be a js PlainObject, why you try to represent it as a string?
    
@Constantine i updated the issue with image .Please have a look on it.
– narayan
6 hours ago

答案:

答案1:

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

答案评论:

    
Could you guide how exactly i should use formadata ..actually article doesn’t clear doubt..
– narayan
7 hours ago

原文地址:

https://stackoverflow.com/questions/47748483/trying-to-stringify-textbox-input-data-and-uploaded-images-in-json-format-to-sen

添加评论

友情链接:蝴蝶教程