Ajax图像上传通知

时间:2014-09-23 18:18:03

标签: javascript php jquery ajax

我觉得我已经睡了,无法找到我的错误。感谢您为这篇简短的帖子提供的帮助。

我的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 ...

感谢您的帮助,我今天晚上失明了。

1 个答案:

答案 0 :(得分:3)

您的$.post()正在发布到表单,但它没有向该表单提供任何数据。这导致undefined index: avatar,因为您的postavatar数组中未包含files的索引。要解决此问题,请通过构建POST对象传递FormData中的图像。此外,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);
        }
    });
});