Ajax图片上传通知

Question

我想我已经睡了，找不到我的错误。感谢您为这篇短文发表的意见，并感谢您的帮助。

我的JavaScript

$("#avatarImage").change(function() { 
    $("#avatar").html('<img src="assets/images/loader.gif" alt="">'); 
    $.post('ajax/avatarUpload.php', function(data) { 
     alert(data); 
    }); 
}); 

我的形式

<form enctype="multipart/form-data" method="post" action="ajax/avatarUpload.php" id="avatarUpload"> 
    <span class="btn btn-teal btn-file btn-sm"><span class="fileupload-new"><i class="fa fa-pencil"></i></span><span class="fileupload-exists"><i class="fa fa-pencil"></i></span> 
     <input type="file" name="avatar" id="avatarImage"> 
    </span> 
</form> 

我的PHP代码

$file_up_size = $_FILES['avatar']['size']; 
$file_name = md5(uniqid(rand(), true)); 
$add = '../assets/images/avatars/' . $file_name; 

if(!move_uploaded_file($_FILES['avatar']['tmp_name'], $add)){ 
    echo 'FEHLER'; 
} else { 
    //database crap 
} 

我的错误（或多个）

Notice: Undefined index: avatar in ... 

谢谢你的帮助，今天晚上我失明了。

Answer 1

您的$.post()张贴到表单，但它没有提供任何数据到该表单。这导致undefined index: avatar，因为您的post在files阵列中不包括索引avatar。要解决这个问题，请通过构建一个FormData对象来传递POST中的图像。此外，ajax包装$.post()不允许您设置某些选项，因此我们需要打开它并使用$.ajax()代替。

$("#avatarImage").change(function() { 
    $("#avatar").html('<img src="assets/images/loader.gif" alt="">'); 
    var fd = new FormData() 
    fd.append('avatar', $('#avatarImage')[0].files[0]); 

    $.ajax({ 
     url: 'ajax/avatarUpload.php', 
     type: 'POST', 
     data: fd, 
     contentType: false, 
     processData: false, 
     success: function(data){ 
      console.log(data); 
     } 
    }); 
});