Question

我正在尝试通过ajax上传用户注册图片。这就是它的形式+名称，密码和电子邮件的一些字段的效果。

<form method="post" class="registerForm" enctype="multipart/form-data" id="login-form">
    <div class="form-group">
        <label><b>Profile Image <span class="required">*</span></b></label>
        <input accept="image/*" type="file" id="picture" name="picture" required>
    </div>
    <div class="clearfix">
        <button type="submit" id="login" class="signupbtn">Sign Up</button>
    </div>              
</form>

我在SO的另一个帖子上找到了我需要把它放在我的ajax脚本上

    var data = $("#login-form").serialize();
    var form = new FormData(document.getElementById('picture'));
    //append files
    var file = document.getElementById('picture').files[0];
    if (file) {   
        form.append('picture', file);
    }

这是完整的ajax

function submitForm()
{
    var data = $("#login-form").serialize();
    var form = new FormData(document.getElementById('picture'));
    //append files
    var file = document.getElementById('picture').files[0];
    if (file) {   
        form.append('picture', file);
    }
    $.ajax({

        type : 'POST',
        url  : 'registration.php',
        data : data,            
        beforeSend: function()
        {
            $("#error").fadeOut();
            $("#login").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...');
        },
        success :  function(data)
        {
            if(data=="registered")
            {                    
            }
        }
    });
    return false;
}

服务器端为图片部分和查询

if(!empty($_FILES['picture']) && $_FILES['picture']['size']  >0  ){

    $profilePic = $randomString. basename($_FILES['picture']['name']);
    $uploadfile = $uploaddir .$randomString. basename($_FILES['picture']['name']);

    if (move_uploaded_file($_FILES['picture']['tmp_name'], $uploadfile)) {
    } else {
        $error = "error\n";
    }
}else{
    $error ='Please add your Picture!';
}   
var_dump($_FILES['picture']);
try
{
    $stmt = $db_con->prepare("SELECT * FROM users WHERE email=:email");
    $stmt->execute(array(":email"=>$email));
    $count = $stmt->rowCount();

    if($count==0){
        $stmt = $db_con->prepare("INSERT INTO users (picture) VALUES (:picture)");
        $stmt->bindParam(":picture",$profilePic);

        if($stmt->execute()) {
            echo "registered";
        }
        else { echo "Query could not execute !"; }
    }
    else{ echo "1"; }
}
catch(PDOException $e){
    echo $e->getMessage();
}

我已删除其他字段，以便尽可能简化代码。除图像名称外，所有字段都已插入并保存在数据库中。

可能是什么问题？完全没有错误。我在控制台上有registered，var_dump($_FILES['picture'])

为NULL

Answer 1

您必须将contentType选项设置为false，因此jQuery不会添加Content-Type heade并将processData标志设置为false，否则jQuery将尝试将您的FormData转换为字符串，这将失败。

所以ajax代码看起来像

    $(".signupbtn").click(function(e){
    e.preventDefault();
    var form = new FormData(document.getElementById('picture'));
//append files
var file = document.getElementById('picture').files[0];
if (file) {   
    form.append('picture', file);
}

    $.ajax({

        type : 'POST',
        url  : 'registration.php',
        data : form, 
        contentType: false,
        processData: false,         
        success :  function(data){}
    });
});

Answer 2

如果您不使用proccessData: false，jQuery会将数据作为字符串处理。 Bellow代码可以正常工作。还包括代码中的一些注释

$(document).ready(function (e){
    $("#login-form").on('submit',(function(e){
        e.preventDefault();
        $.ajax({
            url: "registration.php",
            type: "POST",
            data:  new FormData(this), // Data sent to server
            contentType: false, // The content type used when sending data to the server.
            cache: false, // To unable request pages to be cached
            processData:false,  // To send DOMDocument or non processed data file it is set to false
            success: function(data){
                    if(data=="registered"){}
            },
            error: function(){}             
        });
    }));
});

上传表单上的图片始终为NULL

2 个答案: