ajax 将多部分表单数据作为 json 对象上传

Posted

技术标签:

【中文标题】ajax 将多部分表单数据作为 json 对象上传【英文标题】:ajax upload multipart form data as json object 【发布时间】:2014-10-18 07:12:45 【问题描述】:

这里有带图片的表单数据。我需要通过 json 对象发送整个图像数据。下面我已经提到了代码。在下面的方法下,我可以获得除徽标之外的全部数据。我需要一次发送全部数据

 <form class="form-horizontal" id="companyData">
            <fieldset>

                <legend>Add Company</legend>

                <div class="control-group">
                    <label class="control-label" for="code">Code</label>
                    <div class="controls">
                        <input id="code" name="code" type="text" placeholder="code" class="input-large">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="name">Name</label>
                    <div class="controls">
                        <input id="name" name="name" type="text" placeholder="Name"  class="input-xlarge">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="logo">Logo</label>
                    <div class="controls">
                        <input id="logo" name="logo" class="input-file" type="file">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="username">Admin Username</label>
                    <div class="controls">
                        <input id="username" name="username" type="text" placeholder="" class="input-xlarge">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="AdminPassword">Admin Password</label>
                    <div class="controls">
                        <input id="AdminPassword" name="AdminPassword" type="text" placeholder="" class="input-xlarge">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="submit"></label>
                    <div class="controls">
                        <button id="submit" name="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>

            </fieldset>
        </form>

这是我的脚本

<script type="text/javascript">
    $(document).ready(function () 
        $("#submit").click(function (e) 
            e.preventDefault();
            var formData = JSON.parse(JSON.stringify(jQuery('#companyData').serializeArray()));
            $.ajax(
                type: "POST",
                url: "",
                data: formData,
                cache: false,
                success: function (data) 
                
            );

        );
    );
</script>

【问题讨论】:

好吧,当发送没有 ajax 的文件数据时,您需要在表单上添加一个 enctype="multipart/form-data",这样在通过 ajax 发送数据时就可以相同或相似。相关线程:***.com/questions/20795449/… 见***.com/questions/5941393/… 您找到解决方案了吗?你能分享你的想法吗?我将不胜感激。 【参考方案1】:

使用 json.stringify 时图像是一个问题。发送 formdata 对象并将所有项目附加到其中。试试这个

    var imgFile = document.getElementById('logo');
var imgfileList = imgFile.files;

var formdata = new FormData();
if (imgfileList && imgfileList != null && imgfileList.length > 0) 

    formdata.append(imgfileList[0].name, imgfileList[0]); or add the name
    formdata.append('logofilename', imgfileList[0]);

var other_data = $('#companyData :input').serializeArray();
$.each(other_data, function (key, input) 
    formdata.append(input.name, input.value);
);


    $.ajax(
        url: UrlRoot.SaveTeamInfo,
        data: formdata,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function () 

        
    );

请记住将流程数据和内容类型添加为 false,如上面的 ajax 调用中指定的那样。

试试这是formdata未定义'

if(typeof FormData == "undefined")
var data = [];
data.push(imgfileList[0].name, imgfileList[0]);

else
var data = new FormData();
    data.append('data', JSON.stringify(inputData));

对数组使用 .push 而不是 .append

【讨论】:

好的,让我检查一下。在那之前尝试编辑的解决方案,formdata的解决方法,让我知道它是否有效 尝试在表单标签中添加enctype="multipart/form-data" 并检查一次

以上是关于ajax 将多部分表单数据作为 json 对象上传的主要内容,如果未能解决你的问题,请参考以下文章

无法将多部分表单数据从 React 正确发送到 Express Js

Ajax(form表单文件上传请求头之contentTypeAjax传递json数据)

AJAX多文件上传

如何在 javascript 中使用表单数据上传大型 JSON 对象?

无法使用 Ajax 将多部分文件从 JSP 传递到 Spring MVC 中的控制器

如何将多部分/表单数据从 android 发送到 Web 服务器?