通过AJAX发送图像的问题

我创建了一个on submit函数，可以抓取不同的数据和图像，如果用户已经上传它们并将图像FormData到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 = [];//



	







 
	
Answer 1
		      	
 您不能只将FormData对象作为属性添加到data对象。 您只能单独发送一个 FormData对象，这将被适当地编码。 如果你传递一个键值对象，jQuery将尝试使用www-form-urlencode。 另请参见如何在jQuery中使用Ajax请求发送FormData对象？  。 
 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"); }); }