我使用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脚本,然后使用$additional_data = $_POST['additional_data']
在我的php脚本中处理它。我使用的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数组。
我也想做同样的事情。这是我的解决方案:
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上找到有关额外参数的添加信息在这里
我希望我能正确理解你。也许这个片段对你有帮助:
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,