我创建了一个在提交功能,抓住不同的数据以及图片,如果用户上传他们和纽带图像转换成一个 FORMDATA
键入对象。这比与其他数据一起发送到服务器上载。我的问题是,我似乎无法得到的图像服务器以及其他变量。我得到的成功
空白响应。
I created a on submit function that grabs different data along with images, if the user has uploaded them and ties the images into a FormData
type object. This is than sent along with other data to the server to upload. My issue is that, I seem to be having trouble getting the images to the server along with other variables. All I get on success
a blank response.
下面是我在做什么:
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");
}
});
}
下面是我的数据
响应: {地位:OK,code:1,original_request: []}
我的服务器端创建一个数组,并存储所有的 $ _ POST
在 original_request
比 json_encoding
检索。
My server side is creating an array and storing all the the $_POST
within the original_request
and than json_encoding
for retrieval.
建议或想法?
您不能只是添加 FORMDATA
对象属性的数据
对象。您只能发送一个 FORMDATA
单独的对象,这将让恩codeD适当。如果你传递一个key-value对象,jQuery将尝试WWW的形式urlen $ C C是$。另请参见如何发送FORMDATA在jQuery的Ajax的请求对象?。
You cannot just add a FormData
object as a property to the data
object. You can only send one FormData
object alone, which will get encoded appropriately. If you pass a key-value object, jQuery will try to www-form-urlencode that. See also 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");
});
}