我正在使用jQuery,我想用Ajax上传文件。我进行了一些搜索,发现这是不可能的。
但是,有一个jQuery插件,jQuery Form Plugin,它允许我们通过Ajax上传文件。
它工作得很好,但我有一个特殊的问题。这是我的代码:
$('#question-form').submit(function() {
var serialAnswers = '';
// Create a query string given some fields
// Format of the query string : answers[0][fr_fr][0]=a1fr&answers[0][fr_fr][1]=2&answers[0][en_uk][0]=a1en&answers[0][en_uk][1]=6&...
$('#question-answers > div').each(function(idx, elt) {
$('div[lang]', $(elt)).each(function(idxLang, eltLang) {
var lang = $(this).attr('lang');
serialAnswers += 'answers[' + idx + '][' + lang + '][0]=' + $("[answerpart=display]", $(eltLang)).val();
serialAnswers += '&answers[' + idx + '][' + lang + '][1]=' + $("[answerpart=value]", $(eltLang)).val() + '&';
});
});
$(this).ajaxSubmit({
datatype: "html",
type: "POST",
data: serialAnswers,
url: $(this).attr("action"),
success: function(retour) {
$('#res-ajax').html(retour);
}
});
return false;
});
如您所见,我必须使用相同的选项将$.ajax
调用替换为$(this).ajaxSubmit()
调用。此外,我必须根据某些字段创建一个查询字符串(代码中的 serialAnswers),以便将其传输到 PHP 代码。
这是我在没有要上传的文件时经常做的事情。我刚刚序列化了表单字段并添加了名为 serialAnswers 的查询字符串:
$.ajax({
datatype: "html",
type: "POST",
data: $(this).serialize() + '&' + serialAnswers,
url: $(this).attr("action")
success: function(retour) {
$("#res-ajax").html(retour);
}
});
但我的问题是表单插件以这种方式(在 PHP 文件中)传输我的附加数据(查询字符串):
Array
(
[question_heading_fr_fr] => something
[question_heading_en_uk] => nothing
[question_type] => 5
[0] => a
[1] => n
[2] => s
[3] => w
[4] => e
[5] => r
[6] => s
[7] => [
[8] => 0
[9] => ]
[10] => [
[11] => f
[12] => r
[13] => _
[14] => f
[15] => r
[16] => ]
....
)
根据文档,我必须将 JSON 对象传递给数据选项,如下所示:
data: { key1: 'value1', key2: 'value2' }
但是我不知道如何将我的查询字符串转换为 JSON 对象,以及它是否会被解释为 PHP 端的数组。
有解决办法吗?
编辑:即使我使用iframe,我也不知道如何添加查询字符串,其中包含不是来自表单的信息(我的serialAnswer
来自上面的代码)。
尝试上传。这是一个基于Flash的上传插件。它易于实现并支持多个文件上传。
我不确定你到底在寻找什么,但你为什么不能做:
data: {'key1':$(this).serialize(),'key2': serialAnswers}
然后在PHP端解码PHP你做的
json_decode($arr); //Where $arr is whatever the array is that gets passed
如果您需要传回 JSON 响应,您只需执行以下操作:
json_encode($arr); //Where arr is an array you build within your script
我假设这是你想要的。
编辑:我找到了一个新的解决方案,它可以:)
我已经修改了jQuery Form插件。插件页面:http://jquery.malsup.com/form/#getting-started。脚本:https://github.com/malsup/form/raw/master/jquery.form.js
为了使用此语法:
$('#myform').submit(function() {
var queryString = 'answers[0][fr_fr][0]=a1fr&answers[0][fr_fr][1]=2&answers[0][en_uk][0]=a1en&answers[0][en_uk][1]=6';
$(this).ajaxSubmit({
dataType: 'html',
data: queryString
});
return false;
});
而不是:
$('#myform').submit(function() {
$(this).ajaxSubmit({
dataType: 'html',
data: {'key':'value' }
});
return false;
});
我已经修改了插件代码。
找到这个:
var n,v,a = this.formToArray(options.semantic);
if (options.data) {
options.extraData = options.data;
for (n in options.data) {
if(options.data[n] instanceof Array) {
for (var k in options.data[n]) {
a.push( { name: n, value: options.data[n][k] } );
}
}
else {
v = options.data[n];
v = $.isFunction(v) ? v() : v; // if value is fn, invoke it
a.push( { name: n, value: v } );
}
}
}
并删除所有if (options.data)
及其内容。在这些之后的几行,找到这个:
var q = $.param(a);
并在它之后添加它:
if (options.data) {
options.extraData = options.data;
q += '&' + options.data;
}
在函数 fileUpload() 中,找到这个:
var extraInputs = [];
try {
if (s.extraData) {
for (var n in s.extraData) {
extraInputs.push(
$('<input type="hidden" name="'+n+'" value="'+s.extraData[n]+'" />')
.appendTo(form)[0]);
}
}
// Add iframe to doc and submit the form
$io.appendTo('body');
io.attachEvent ? io.attachEvent('onload', cb) : io.addEventListener('load', cb, false);
form.submit();
}
并将其替换为:
var extraInputs = [];
try {
if (s.extraData) {
var couples = s.extraData.split('&');
for (var c=0 ; c < couples.length ; c++)
{
var couple = couples[c].split('=');
extraInputs.push(
$('<input type="hidden" name="'+couple[0]+'" value="'+couple[1]+'" />')
.appendTo(form)[0]);
}
}
// add iframe to doc and submit the form
$io.appendTo('body');
io.attachEvent ? io.attachEvent('onload', cb) : io.addEventListener('load', cb, false);
form.submit();
}
由于这些修改,您现在可以添加查询字符串并同时上传图像。