使用AJAX和PHP上传文件映像

时间:2018-03-01 14:11:28

标签: php ajax forms

我正在尝试创建一个上传文档,上传个人资料图片。我无法从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

2 个答案:

答案 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,但我想这是个人偏好...