我正在尝试使用ajax和php上传一些表单数据但由于某种原因我的数据没有被捕获或传递。
这就是我所拥有的:
form.html(包含3个文本输入和1个文件的基本表单)
<form class="form" id="superform" action="nada.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="tituloQuiz">Resultado:</label>
<input type="text" class="form-control resultado" id="titulo" name="titulo" placeholder="Ex: Paris">
</div>
<div class="form-group">
<label for="desc">Descrição do Site:</label>
<textarea class="form-control" id="desc" name="descricao" placeholder="Ex:"></textarea>
</div>
<div class="form-group">
<label for="desc">OG FB DESC:</label>
<textarea class="form-control" id="facedes" name="descricao" placeholder="facebook description"></textarea>
</div>
<div class="form-group">
<label for="imggrande">Imagem</label>
<input type="file" id="imggrande" name="imgres">
<p class="help-block">Imagem usada na página de resultado e Facebook 600 x 400.</p>
</div>
<button type="button" class="btn btn-primary btn-lg addres">Adicionar Resultado</button>
<button type="button" class="btn btn-danger btn-lg">Próxima Etapa</button>
</form>
这是进行ajax调用的JS: 的 myjs.js
$("document").ready(function(){
$('.row').on('click','.addres',function(){
console.log('Click Detectado');
var formulario = $('#superform');
var formData = new FormData(formulario);
$.ajax({
type: "POST",
url: "addres.php",
data: formData,
async: false,
success: function(data) {
console.log('Funcionou');
},
error: function(data) {
console.log('Erro no formulario');
},
cache: false,
contetType: false,
processData: false
});
});
});
没有传递任何内容且POST调用为空(请参阅下面的屏幕截图)。
**addres.php**
<?php
var_dump($_FILES);
var_dump($_POST);
?>
答案 0 :(得分:3)
$.ajax({
url: 'address.php',
type: 'POST',
data: new FormData($('#superform')[0]), // The form with the file inputs.
processData: false, // Using FormData, no need to process data.
contentType:false
}).done(function(){
console.log("Success: Files sent!");
}).fail(function(){
console.log("An error occurred, the files couldn't be sent!");
});
当将contentType选项设置为false时,它会强制jQuery不添加Content-Type标头,否则将丢失边界字符串。此外,当通过多部分/表单提交文件时,必须将processData标志设置为false,否则,jQuery将尝试将FormData转换为字符串,这将失败。
使用
从php读取 $_FILES['file-0']
(只有一个文件,文件为0,除非您在文件输入中指定了多个属性,在这种情况下,数字将随每个文件递增。)
其他信息: 通过使用console.log(),自己查看formData如何传递到php页面的区别。
var formData = new FormData($('#superform')[0]);
console.log(formData);
var formDataSerialized = $('#superform').serialize();
console.log(formDataSerialized);
希望这有帮助。
额外信息请阅读此upload files asynchronously
注意:formData不能在IE 9中运行
答案 1 :(得分:0)
您可以使用.serializeArray()获取数组格式的数据,然后将其转换为对象。像这样:
function getFormData(formId) {
let formData = {};
let inputs = $('#'+formId).serializeArray();
$.each(inputs, function (i, input) {
formData[input.name] = input.value;
});
return formData;
}