我正在尝试创建一份提交简历的表单。
我需要候选人姓名，电子邮件，简历封面和简历（文件）。
var candidateName = $('#candidateName').val();
var candidateEmail = $('#candidateEmail').val();
var candidateMessage = $('#candidateMessage').val();
var file_data = $('#candidateResume').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('name', candidateName);
form_data.append('id', candidateEmail);
form_data.append('msg', candidateMessage);
console.log(form_data);
$.ajax({
url: "cvForm.php",
type: "POST",
data: {candata: form_data},
success : function(data){
console.log(data);
},
contentType: false,
processData: false
});
当我
时，我的cvForm.php文件中没有返回任何内容var_dump($_POST) or
var_dump($_FILES)
当我
var_dump($_POST['candata']) - it says undefined index
HTML
<form id="cvSubmit" class="mui-form">
<div>
<span class="form-success-msg" id="cv-form-success-msg">
Thanks for reaching out to us. We will get back to you shortly.
</span>
</div>
<div class="row">
<div class="col-sm-6">
<div class="mui-textfield mui-textfield--float-label">
<input type="text" id="candidateName" class="mui--is-empty mui--is-untouched mui--is-pristine">
<label>Name<span class="red-text">*</span></label>
<span class="error" id="cv-name-error">Please enter your name</span>
</div>
<div class="mui-textfield mui-textfield--float-label">
<input type="email" id="candidateEmail" class="mui--is-empty mui--is-untouched mui--is-pristine">
<label>Email<span class="red-text">*</span></label>
<span class="error" id="cv-email-error">Oops!! Looks like its an incorrect email id. Try again</span>
</div>
<div class="row">
<div class="col-xs-12 file-attachment-wrapper">
<input class="file-addach" type="file" id="candidateResume">
<span>We accept .DOCX,.Doc,pdf,.Txt upto 2 MB.</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="mui-textfield mui-textfield--float-label">
<label>Message<span class="red-text">*</span></label><br><br>
<textarea id="candidateMessage" rows="5" class="mui--is-empty mui--is-untouched mui--is-pristine"></textarea>
<span class="error" id="cv-message-error">That's not very clear...could you rephrase</span>
</div>
<button type="button" class="mui-btn mui-btn--raised red-btn" onclick="cvSubmit()"> SEND </button>
</div>
</div>
</form>
请帮忙。我认为这是一个常见问题，但解决方案似乎都不适用于我。有些代码会刷新页面，我不想发生这种情况。
答案 0 :(得分：0)
从JS中删除此行：
contentType: false,
这告诉jQuery不要设置内容类型的HTTP标头。该标题告诉PHP如何解析POSTed正文。
此外，formdata可以直接发送：
data: form_data,
然后，在PHP中，您应该找到例如$_POST['name']可用。
答案 1 :(得分：0)
您需要以正常形式传递form_data，而不是另一个JSON对象的属性：
$.ajax({
url: 'cvForm.php',
type: 'post',
data: form_data,
processData: false,
success : function(data){
console.log(data);
}
});
现在，在您的PHP脚本中，您将可以访问$_POST['name']，$_POST['id']和$_POST['msg']。同样，$_FILES['file']现在也可用。
答案 2 :(得分：0)
试试这个。它可能会对你有帮助。
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<form id="cvSubmit" class="mui-form">
<div>
<span class="form-success-msg" id="cv-form-success-msg">
Thanks for reaching out to us. We will get back to you shortly.
</span>
</div>
<div class="row">
<div class="col-sm-6">
<div class="mui-textfield mui-textfield--float-label">
<input type="text" id="candidateName" class="mui--is-empty mui--is-untouched mui--is-pristine">
<label>Name<span class="red-text">*</span></label>
<span class="error" id="cv-name-error">Please enter your name</span>
</div>
<div class="mui-textfield mui-textfield--float-label">
<input type="email" id="candidateEmail" class="mui--is-empty mui--is-untouched mui--is-pristine">
<label>Email<span class="red-text">*</span></label>
<span class="error" id="cv-email-error">Oops!! Looks like its an incorrect email id. Try again</span>
</div>
<div class="row">
<div class="col-xs-12 file-attachment-wrapper">
<input class="file-addach" type="file" id="candidateResume">
<span>We accept .DOCX,.Doc,pdf,.Txt upto 2 MB.</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="mui-textfield mui-textfield--float-label">
<label>Message<span class="red-text">*</span></label><br><br>
<textarea id="candidateMessage" rows="5" class="mui--is-empty mui--is-untouched mui--is-pristine"></textarea>
<span class="error" id="cv-message-error">That's not very clear...could you rephrase</span>
</div>
<button type="submit" class="mui-btn mui-btn--raised red-btn"> SEND </button>
</div>
</div>
</form>
<script>
$(document).ready(function(){
$("#cvSubmit").submit(function(e) {
e.preventDefault();
var candidateName = $('#candidateName').val();
var candidateEmail = $('#candidateEmail').val();
var candidateMessage = $('#candidateMessage').val();
var file_data = $('#candidateResume').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('name', candidateName);
form_data.append('id', candidateEmail);
form_data.append('msg', candidateMessage);
console.log(form_data);
$.ajax({
url: "cvForm.php",
type: "POST",
data: form_data,
success : function(data){
console.log(data);
},
contentType: false,
processData: false
});
});
});
</script>
</body>
</html>
希望它有所帮助！