Question

我正在尝试将文本框输入数据字符串化并以json格式上传图像以通过ajax发送。但是在alert(file[0].name + " is not a valid image file.");处收到错误此时在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

希望这会有所帮助。请随时要求任何澄清

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

1 个答案: