javascript - 尝试将文本框输入数据和上传的图像以json格式字符串化以通过ajax发送

Question

我正在尝试对文本框输入数据进行字符串化，并以 json 格式上传图像以通过 ajax 发送。但是 alert(file[0].name + "不是有效的图像文件。"); 此时在ajax部分 data: '{user: "' + JSON.stringify(user) + '",byteData: "' + byteData + '", imageName: "' + fileName + '", contentType : "' + contentType + '"}',

下面给出的脚本接受来自文本框、标签和图像上传控件的值，然后将所有值字符串化并以 json 格式通过 Ajax 传递。 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>

Answer 1

对于ajax文件上传，最好使用Formdata，引用下面的链接

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

希望这有帮助。请随时询问任何澄清