我正在尝试创建一个上传文档,上传个人资料图片。我无法从changePicture
表单中捕获数据,该表单只有图像输入和提交。我从未使用FormData
对象到目前为止,所以我仍在学习这个。任何指导都会有用。
查看我的HTML
<form id="changePicture" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Update Your Profile Picture</label>
<input type="file" id="profilePic" class="form-control" name="profilePic">
<input type="hidden" value="<?php echo $id; ?>" name="id">
</div>
<button type="submit" id="updateProfileBtn" class="btn btn-success float-right">Upload Image</button>
</form>
这是我的AJAX代码:
function updateProfilePic(){
$("#changePicture").on("submit", function(e) {
e.preventDefault();
$("#spinner").show();
setTimeout(function(){
$.ajax({
url: "../ajax/admin/updateProfilePic.php",
type: "POST",
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
success: function(result){
$("#spinner").hide();
$("#changePicture").append(result);
setTimeout(function(){
$("#changePicture").slideDown();
}, 1500);
}
});
}, 3000);
});
}
此时的PHP文件只能回避&#34;工作&#34;看到它访问页面就好了,它确实如此。但是,当我尝试通过变量找到文件时,没有发送任何内容并返回undefined index
。
答案 0 :(得分:1)
为什么要在
中包装AJAX调用setTimeout(function() {..})
?
通过这样做,您不能简单地编写new FormData(this)
,因为this
上下文不会引用您要查找的表单。
尝试在没有超时的情况下执行代码,或尝试将表单数据存储在全局变量
中编辑:添加了示例:
var myFormData;
function updateProfilePic(){
$("#changePicture").on("submit", function(e) {
e.preventDefault();
$("#spinner").show();
myFormData = new FormData(this);
setTimeout(function(){
$.ajax({
url: "../ajax/admin/updateProfilePic.php",
type: "POST",
data: myFormData,
....
答案 1 :(得分:1)
这将是未定义的,因为它在ajax的范围内
尝试:
me = this;
$.ajax({
url: "../ajax/admin/updateProfilePic.php",
type: "POST",
data: new FormData(me),
...
对我来说,当使用ajax时,我总是喜欢对图像进行base64编码并将其作为JSON传递给PHP,但我想这是个人偏好...