Javascript 发布带有图像二进制文件的 jsonObject答案

【问题标题】：Javascript post jsonObject with Image BinaryJavascript 发布带有图像二进制文件的 jsonObject
【发布时间】：2013-05-29 07:44:20
【问题描述】：

我有一个用于填写个人资料的 HTML 表单，其中包括字符串和图像。我需要通过一个后端 api 调用将所有这些数据作为 JsonObject 发布，而后端需要将图像文件作为二进制数据发送。这是我的 Json 数据如下：

var profile = {
            "userId"                : email_Id,
            "profile.name"              : "TML David",
            "profile.profilePicture"        : profilePhotoData,
            "profile.galleryImageOne"       : profileGalleryImage1Data,
            "profile.referenceQuote"        : "Reference Quote"
    };

并且，profilePhotoData、profileGalleryImage1Data、profileGalleryImage2Data、profileGalleryImage3Data都是图片的二进制数据（Base64）。

这是我的帖子功能：

function APICallCreateProfile(profile){
    var requestUrl = BASE_URL + API_URL_CREAT_PROFILE;

    $.ajax({
        url: requestUrl,
        type: 'POST',
        data: profile,
        dataType:DATA_TYPE,
        contentType: CONTENT_TYPE_MEDIA,
        cache:false,
        processData:false,
        timeabout:API_CALL_TIMEOUTS,
        success: function (response) {
            console.log("response " + JSON.stringify(response));
             var success = response.success;
             var objectData = response.data;
             if(success){
                 alert('CreateProfile Success!\n' + JSON.stringify(objectData));
             }else{
                 alert('CreateProfile Faild!\n'+ data.text);
             }
        },
        error: function(data){
             console.log( "error" +JSON.stringify(data)); 
        },
        failure:APIDefaultErrorHandler
    })
    .done(function() { console.log( "second success" ); })
    .always(function() { console.log( "complete" ); });


    return false;
}

但还是失败了，我检查了服务器端，它抱怨“没有找到多部分边界”。

谁能帮帮我，谢谢:)

更新： var DATA_TYPE = "json"; var CONTENT_TYPE_MEDIA = "multipart/form-data";

【问题讨论】：

什么是CONTENT_TYPE_MEDIA？它必须是 multipart/form-data 之类的东西，否则 POST 数据将没有正确的 boundaries
嗨，andyb，感谢您的回复。刚刚更新了缺失变量的值。
看看stackoverflow.com/a/5976031/637889，因为我认为数据格式错误。此外，在该答案中，dataType 似乎设置为默认值，而不是json。
谢谢，andyb，但似乎不起作用....

标签： ajax json image post

【解决方案1】：

我想我在 vineet 的帮助下找到了解决方案。我用的是XMLHttpRequest，并没有设置requestHeader，但是能用，很奇怪。但希望以下内容能有所帮助

function APICallCreateProfile(formData){
            var requestUrl = BASE_URL + API_URL_CREAT_PROFILE;
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function()
            {
              if (xhr.readyState==4 && xhr.status==200){
                  console.log( "profile:" + xhr.responseText); 
              }else if (xhr.readyState==500){
                  console.log( "error:" + xhr.responseText); 
              }
            }


            xhr.open('POST', requestUrl, true);
            //    xhr.setRequestHeader("Content-Type","multipart/form-data; boundary=----WebKitFormBoundarynA5hzSDsRj7UJtNa");
            xhr.send(formData);

            return false;
         }

【讨论】：

【解决方案2】：

为什么要重新发明轮子。只需使用 Jquery 表单插件，here。它也有分段上传的例子。

您只需将输入类型设置为文件。您将在服务器上接收文件作为输入流（当然它们将是多部分的）

【讨论】：

嗨，维尼，谢谢。但是我觉得这个插件不支持IE8吧？IE8/9支持XDomainRequest对象，但是从IE10开始支持XmlHttpRequest Level 2。
我个人没有IE8，但是IE9可以用。此外，我认为它也适用于旧版浏览器。你为什么不干脆自己动手检查和教育这里的人呢:)