如何向 ajax 文件上传添加额外的 POST 参数?
Posted
技术标签:
【中文标题】如何向 ajax 文件上传添加额外的 POST 参数?【英文标题】:How do I add additional POST parameters to ajax file upload? 【发布时间】:2015-05-23 06:22:15 【问题描述】:我正在使用 ajax 文件上传 javascript 和 php 脚本来上传图像。它与 $_FILES 一起工作令人满意,但我需要向处理脚本发送一些额外的数据。表单 html 如下所示:
<form id="image1" action="" method="post" enctype="multipart/form-data">
<label>image 1?</label>
<p><input type="file" class="saveImage" name="image1" value="<?php echo $something; ?>" id="<?php echo $id; ?>" additional_info="some data" /></p>
<p> <input type="submit" value="Upload" class="submit" /></p>
</form>
我需要能够传递一个变量 id 和一些其他数据,将其称为“additional_data”到 php 脚本,然后在我的 php 脚本中使用$additional_data = $_POST['additional_data']
处理它。我使用的javascript是:
<script>
$(document).ready(function (e)
$("#image1").on('submit',(function(e)
e.preventDefault();
$("#message").empty();
$('#loading').show();
var DATA=$(this).val();
var ID=$(this).attr('id');
var ADDL=$(this).attr('additional_data');
var dataString = 'image1='+DATA+'&id='+ID+'&additional_info='+ADDL;
$.ajax(
url: "uploadFile.php",
type: "POST",
// data: new FormData(this),
data: new FormData(this,dataString),
contentType: false,
cache: false,
processData:false,
success: function(data)
$('#loading').hide();
$("#message").html(data);
);
));
);
</script>
它不发送 dataString,只发送 FILES 数组。
【问题讨论】:
为什么不把其他数据放到其他隐藏字段中呢? 【参考方案1】:我也想做同样的事情。 这是我的解决方案:
JS部分:
var file_data = this.files[0];
file_data.name = idaviz +'.pdf';
var form_data = new FormData();
form_data.append("file", file_data);
form_data.append('extraParam','value231');
console.log(file_data);
console.log('here');
var oReq = new XMLHttpRequest();
oReq.open("POST", "ajax_page.php", true);
oReq.onload = function (oEvent)
if (oReq.status === 200)
console.log('upload succes',oReq.responseText);
else
console.log("Error " + oReq.status + " occurred when trying to upload your file.<br \/>");
;
oReq.send(form_data);
);
PHP部分:
echo $_REQUEST['extraParam']; //this will display "value231"
var_dump($_FILES['file']); //this will display the file object
希望对你有帮助。
可以找到有关 formData 上的额外参数的附加信息 here!
【讨论】:
【参考方案2】:我希望我理解你的正确。也许这个 sn-p 可以帮助你:
var formData = new FormData();
formData.append("image1", fileInputElement.files[0]);
formData.append("ID", ID);
formData.append("ADDL", ADDL);
然后将这个formData变量设置为数据:
type: "POST",
data: formData,
contentType: false,
【讨论】:
第一段代码 (var formData ...) 我在 var dataString 下方添加。当我添加第一行formData.append("image1", fileInputElement.files[0]);
时,它会导致表单无法发布。我通过注释掉该行进行了测试。其他附加行也有同样的问题。
我仍在寻找可行的解决方案。不幸的是,建议的答案不起作用。以上是关于如何向 ajax 文件上传添加额外的 POST 参数?的主要内容,如果未能解决你的问题,请参考以下文章
如何向 Turbine 添加额外的 Hystrix 指标聚合