Javascript 通过AJAX发送图像的问题

我创建了一个on-submit函数，如果用户上传了不同的数据和图像，它会捕获不同的数据，并将图像绑定到

FormData

type对象中。然后将其与其他数据一起发送到服务器进行上载。我的问题是，我似乎很难将图像与其他变量一起发送到服务器。我在

success

上得到的只是一个空白的回答

以下是我正在做的：

ElevationColorsForm.prototype.submit = function()
{
    // DEFUALT SET FORMDATA TO FALSE
    var formdata = false;
    // MAKE SURE BROWSER SUPPORTS FORM DATA
    if (window.FormData) {
        formdata = new FormData();
    }
    /************ DATA IS SENT TO SERVER TO BE STORED ON SAVE CHANGES *****************/
    var color_name = '';//<!-- CONTAIN NAME OF COLOR SET IN INPUT FIELD
    var color_file = '';//<!-- CONTAIN THE IMAGE TO BE UPLOADED // MOVED OVER TO THE formdata
    var color_type = [];//<!-- EITHER new_color OR current_color

    color_name = $(".color-item-input").map(function() 
    {       
        return this.value 

    }).get().join(", ");
    color_file = $(".color-item-file").each(function()
    {

        if(this.files.length > 0)
        {
            if (!!this.files[0].type.match(/image.*/)) {

                var file =  this.files[0];
                var reader;

                if ( window.FileReader ) {
                  reader = new FileReader();
                  reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }

                return file;    
            } 
            else
            {
                formdata.append("images[]", 'none');
                return 'false';
            }
        }
        else
        {
            formdata.append("images[]", 'none');
            return 'false'; 
        }

    }).get();
    $(".color-item").each(function()
    {           
        if($(this).hasClass('current-color'))
        {
            color_type.push('current-color');
        }
        else if($(this).hasClass('new_color'))
        {
            color_type.push('new-color');
        }

    });
    var RestrictionSelectActive = $(".restriction_active_ability option:selected").each(function()
    {           
        return this.value 

    }).get();

    var thisOne = this.Elevation.data.ifpe_id; // <!-- ELEVATION ID
    $.ajax({
        url: "actions/save_elevation_colors.php",
        type: "post",
        data:
        {
            'formData' : formdata,
            'elevation_id' : thisOne
        },
        processData: false,
        contentType: false,
        success: function(data){
            console.log(data);
            $(".message_box").text("Changes made!");
            $(".message_box").fadeIn(); 
            setTimeout(function(){
                $(".message_box").fadeOut();
                $(".message_box").empty();  
            },2000);
        },
        error:function(){
            alert("failure");
        }
    });
}

ElevationColorsForm.prototype.submit=function（）
{
//取消将FORMDATA设置为FALSE
var formdata=false；
//确保浏览器支持表单数据
if（window.FormData）{
formdata=新的formdata（）；
}
/************数据被发送到服务器以存储在保存更改上*****************/
var color_name=''；//您不能将
FormData
对象作为属性添加到
data
对象中。您只能单独发送一个
FormData
对象，该对象将被适当编码。如果您传递一个键值对象，jQuery将尝试对其进行www-form-urlencode编码。另请参阅

那
FileReader
应该在那里做什么？@Bergi我看得越多，我就越不知道了。我可以解码它并用它发送过来，然后用PHP重新编码吗？没有理由这么做，
FormData
为你做。我确信不支持
FormData
的浏览器不支持
FileReader
也可以。我的解决方案是什么？我需要同时发送更多数据。只需将所有数据附加到
formdata
对象，因此每当我需要发送数据时，只需将其附加到
formdata
出于好奇，您知道为什么我们必须将
processData
和
contentType
设置为false吗？
processData
被设置为
false
，因为
数据
是某种对象，jQuery将尝试枚举其属性并将其作为URL参数进行URL编码。它需要直接将
formdata
传递到XHR
。send（）
方法。
contentType
设置为
false
，这将中断请求。
ElevationColorsForm.prototype.submit = function() {
    if (!window.FormData) {
        alert("Sorry, your browser does not support uploading files with Ajax.");
        throw new Error("no FormData support");
    }

    function getValue() { return this.value; }

    var formdata = new FormData();

    var color_name = $(".color-item-input").map(getValue).get().join(", ");
    var RestrictionSelectActive = $(".restriction_active_ability option:selected").map(getValue).get();
    var color_type = $(".color-item").map(function() {           
        if ($(this).hasClass('current-color'))
            return 'current-color';
        if ($(this).hasClass('new_color'))
            return 'new-color';
        return '';
    }).get();

    $(".color-item-file").each(function() {
        if(this.files.length > 0 && /image.*/.test(this.files[0].type)) {
             formdata.append("images[]", this.files[0]);
        } else {
            formdata.append("images[]", 'none');
        }
    });

    formdata.append('elevation_id', this.Elevation.data.ifpe_id);
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    $.ajax({
        url: "actions/save_elevation_colors.php",
        type: "post",
        data: formdata,
//            ^^^^^^^^
        processData: false,
        contentType: false
    }).then(function(data){
        console.log(data);
        $(".message_box").text("Changes made!");
        $(".message_box").fadeIn(); 
        setTimeout(function(){
            $(".message_box").fadeOut();
            $(".message_box").empty();  
        },2000);
    }, function(){
        alert("failure");
    });
}