通過AJAX發送圖像的問題

Question

我創建了一個提交函數，用於抓取不同的數據以及圖像，如果用戶已經上傳並將圖像綁定到FormData類型對象。這不是與其他數據一起發送到服務器上傳。我的問題是，我似乎無法將圖像與其他變量一起獲取到服務器。所有我在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"); 
     } 
    }); 
} 

這裏是我的data響應：{"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"); 
    }); 
}