javascript - 通过 AJAX 发送图像的问题

Question

我创建了一个提交函数，如果用户上传了不同的数据和图像，并将图像绑定(bind)到 FormData 类型对象中，则该函数会抓取不同的数据。然后将其与其他数据一起发送到服务器进行上传。我的问题是，我似乎无法将图像与其他变量一起发送到服务器。我在成功上得到的只是一个空白的回复。

这就是我正在做的事情:

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");
        }
    });
}

这是我的数据响应:{"status":"ok","code":1,"original_request":[]}

我的服务器端正在创建一个数组，并将所有 $_POST 存储在 original_request 中，然后用于检索 json_encoding。

建议或想法？

Answer 1

您不能仅将 FormData 对象作为属性添加到 data 对象。您只能单独发送一个 FormData 对象，该对象将得到适当的编码。如果您传递一个键值对象，jQuery 将尝试对其进行 www-form-urlencode。另请参阅How to send FormData objects with Ajax-requests in jQuery? .

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");
    });
}