带有自定义参数的Ajax请求

时间:2013-09-12 06:38:00

标签: javascript jquery ajax file-upload

我正在开发一个简单的网页,向服务器发出Ajax请求以上传一些图片。
假设网页有多个上传字段,因此可以允许用户上传图像用于不同目的。可以说,一个图像上传字段是上传用户的妈妈的图片,另一个字段是上传他爸爸的图片。
在这种情况下,服务器端需要知道哪个上载是出于何种目的。我目前正在使用的ajax调用是:

$.ajax({
    url: requestUrl,
    type: 'POST',
    success: successCallBack,
    error: errorCallBack,
    data: formData, <-- the image
    cache: false,
    contentType: false,
    processData: false
});

我想让服务器知道用户是否正在为爸爸或妈妈发送图像,我也希望服务器知道这个图像的长度和格式,也许还有一些额外的字符串来描述这个图像。我想知道我是否可以将这些信息编译成Json字符串,并将其与图像一起发送。我不知道在这个ajax调用中我应该将所有这些信息放在哪里。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

我假设您有两个上传按钮,用于上传不同类型的图片。 你可以做的就是为每个按钮提供一个data-id属性。

例如,这个用于上传用户自己的图片:

<input type="button" data-id="ownpicture" value=""></input>

当您单击此按钮调用ajax方法时,您可以捕获变量中的data-id属性,例如

var pictureType = $(this).attr('data-id');

然后,您可以将此值作为参数传递给方法。 在服务器端,您可以使用switch-case根据此字符串参数保存正确的图片。有意义吗?

您可以在formdata对象中添加其他信息,如下例所示:

var fd = new FormData("Your image here");
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false,  
contentType: false   
});