如何检查图像是否已上传? AJAX PHP

时间:2016-12-17 20:59:17

标签: javascript php jquery json ajax

我正在尝试开发一个网络应用,您可以在其中创建帖子并使用它创建一个(仅一个)图像,但您不必拥有一个它也可能只是一个文本帖子。这只是一个个人项目,试图通过php和ajax变得更好,所以我可能做错了...我想做的是提交将表单数据发送到php函数,将确定是上传它还是不,那么我想要做的是,如果成功将图像名称发送到不同的功能,将帖子插入数据库,但如果图像上传不成功则显示错误。此外,如果不成功但错误是“没有上传图片”,请继续创建帖子。

这是我到目前为止所拥有的

jQuery

   $(".new-post").submit(function (e) {

    e.preventDefault();

    $.ajax({
        type: "post",
        url: "includes/image-upload.php",
        data: new FormData(this),
        processData: false,
        contentType: false,
        error: function (response) {
            console.log(response);
        },
        success: function (response) {
            var body = $("#post-body").val();
            $.ajax({
                type: "post",
                url: "create-post-feed.php",
                data: {
                    body: body,
                    image: response
                },
                error: function (response) {
                    console.log(response);
                },
                success: function (response) {
                    //                        console.log(response);
                    $('section.feed').prepend(response);
                    $('article.post p').each(function () {
                        $(this).html(linkHashtags($(this).html()));
                    });
                    $('article.post p').each(function () {
                        $(this).html(linkatsymbols($(this).html()));
                    });
                    revealPosts();
                }
            });
        }
    });

});

PHP 经过一些研究后,我发现如果它是一个错误,我必须将其作为JSON发回,然后在jQuery中检查结果。但是我还没有那个工作......

<?php

require_once('../dbconnect.php');
include_once( INCLUDES_PATH .'functions.php');

function uploadFile ($file_field = null, $check_image = false, $random_name = false) {

//Config Section 
$user_id = $_SESSION['user_id'];
//check if directory exist if not create it
if (!file_exists(HOME_PATH ."users/user_".$user_id)) {
    mkdir(HOME_PATH ."users/user_".$user_id, 0777, true);
}
if (!file_exists(HOME_PATH ."users/user_".$user_id."/posts")) {
    mkdir(HOME_PATH ."users/user_".$user_id."/posts", 0777, true);
}
//Set file upload path
$path = "../users/user_".$user_id."/posts/"; //with trailing slash
//Set max file size in bytes
$max_size = 1000000;
//Set default file extension whitelist
$whitelist_ext = array('jpeg','jpg','png','gif');
//Set default file type whitelist
$whitelist_type = array('image/jpeg', 'image/jpg', 'image/png','image/gif');

//The Validation
// Create an array to hold any output
$out = array('error'=>null);

if (!$file_field) {
    $out['error'][] = "Please specify a valid form field name";           
}

if (!$path) {
    $out['error'][] = "Please specify a valid upload path";               
}

if (count($out['error'])>0) {
    return $out;
}

//Make sure that there is a file
if((!empty($_FILES[$file_field])) && ($_FILES[$file_field]['error'] == 0)) {

    // Get filename
    $file_info = pathinfo($_FILES[$file_field]['name']);
    $name = $file_info['filename'];
    $ext = $file_info['extension'];

    //Check file has the right extension           
    if (!in_array($ext, $whitelist_ext)) {
        $out['error'][] = "Invalid file Extension";
    }

    //Check that the file is of the right type
    if (!in_array($_FILES[$file_field]["type"], $whitelist_type)) {
        $out['error'][] = "Invalid file Type";
    }

    //Check that the file is not too big
    if ($_FILES[$file_field]["size"] > $max_size) {
        $out['error'][] = "File is too big";
    }

    //If $check image is set as true
    if ($check_image) {
        if (!getimagesize($_FILES[$file_field]['tmp_name'])) {
            $out['error'][] = "Uploaded file is not a valid image";
        }
    }

    //Create full filename including path
    if ($random_name) {
        // Generate random filename
        $tmp = str_replace(array('.',' '), array('',''), microtime());

    if (!$tmp || $tmp == '') {
        $out['error'][] = "File must have a name";
    }     
        $newname = $tmp.'.'.$ext;                                
    } else {
        $newname = $name.'.'.$ext;
    }

    //Check if file already exists on server
    if (file_exists($path.$newname)) {
        $out['error'][] = "A file with this name already exists";
    }

    if (count($out['error'])>0) {
        //The file has not correctly validated
        return $out;
    } 
    if (move_uploaded_file($_FILES[$file_field]['tmp_name'], $path.$newname)) {
        echo $newname;
    } else {
        $out['error'][] = "Server Error!";
    }
 } else {
    $out['error'][] = "No file uploaded";
    return $out;
 }      
}

$file = uploadFile('file', true, true);

if (is_array($file['error'])) {
echo json_encode($file['error']);
}

die();

非常感谢有关如何改善它的任何帮助或评论 BTW这当前有效,唯一的问题是无论图片是否上传,都会始终创建帖子。

通常我至少会在同一天得到答案......这个问题是不是很糟糕? XD我听说编辑有助于提出问题&#39;

2 个答案:

答案 0 :(得分:0)

你说你想做的事情与你实际做的不同。在您的代码中,您正在尝试两个AJAX调用:(1)上传图像和(2)保存帖子。

为什么不在一次通话中同时做两件事?这样您就不必等待上传图片(或没有)的响应来创建新帖子。

$(".new-post").submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: "post",
        url: "create-post-feed.php",
        data: new FormData(this), // send post information including selected file
        processData: false,
        contentType: false,
        error: function (response) {
            console.log(response);
        },
        success: function (response) {
            // etc
        }
    });
});

然后在create-post-feed.php中,将image-upload.php中的逻辑与当前代码合并。我通常这样做:

// validate post

// validate image (if any)

// if no errors:

    // upload image (if any) and retrieve filename

// if no errors:

    // save post (with filename if any); if it fails, delete image (if any)

// send response 

答案 1 :(得分:0)

@Mikey这是我的新php文件的样子。现在我的问题是,如何使它成功,如果jQuery成功将新帖子附加到Feed,如果不是,则在separete div中显示错误?

<?php
require_once('../dbconnect.php');
include_once( INCLUDES_PATH .'functions.php');

$body = $_POST["body"];
$image = 'image';
$user_id = $_SESSION['user_id'];

if( empty($_FILES[$image]['name']) ){
    $has_image = 0;
}else{
    $has_image = 1;
}

$postEmpty = 0;

if( empty($_FILES[$image]['name']) && empty($body) ){
$postEmpty = 1;
die();
} 

// validate post

if( $postEmpty == 0 && !empty($body) ){

    $cleanBody = clean_input($body);

}

// validate image (if any)

if( $has_image == 1 ){

    //check if directory exist if not create it
    if (!file_exists(HOME_PATH ."users/user_".$user_id)) {
        mkdir(HOME_PATH ."users/user_".$user_id, 0777, true);
    }
    if (!file_exists(HOME_PATH ."users/user_".$user_id."/posts")) {
        mkdir(HOME_PATH ."users/user_".$user_id."/posts", 0777, true);
    }
    //Set file upload path
    $path = "../users/user_".$user_id."/posts/"; //with trailing slash
    //Set max file size in bytes
    $max_size = 2000000;
    //Set default file extension whitelist
    $whitelist_ext = array('jpeg','jpg','png','gif');
    //Set default file type whitelist
    $whitelist_type = array('image/jpeg', 'image/jpg', 'image/png','image/gif');

    // Create an array to hold any output
    $errors = array();

    // Get filename
    $file_info = pathinfo($_FILES[$image]['name']);
    $name = $file_info['filename'];
    $ext = $file_info['extension'];

    //Check file has the right extension           
    if (!in_array($ext, $whitelist_ext)) {
        $errors[] = "Invalid file Extension";
    }

    //Check that the file is of the right type
    if (!in_array($_FILES[$image]["type"], $whitelist_type)) {
        $errors[] = "Invalid file Type";
    }

    //Check that the file is not too big
    if ($_FILES[$image]["size"] > $max_size) {
        $errors[] = "File is too big";
    }

    //If $check image is set as true
    if (!getimagesize($_FILES[$image]['tmp_name'])) {
        $errors[] = "Uploaded file is not a valid image";
    }

    //Create full filename including path
    if ($random_name) {
    // Generate random filename
        $tmp = str_replace(array('.',' '), array('',''), microtime());

    if (!$tmp || $tmp == '') {
        $errors[] = "File must have a name";
    }     
        $newname = $tmp.'.'.$ext;                                
    } else {
        $newname = $name.'.'.$ext;
    }

    //Check if file already exists on server
    if (file_exists($path.$newname)) {
        $errors[] = "A file with this name already exists";
    }

    if (count($errors)>0) {
    //The file has not correctly validated
        $imageError = 1;
    }

// if no errors:

    // upload image (if any) and retrieve filename
    if( $imageError == 1 ){

        foreach($errors as $error) {
            echo '<li>'.$error.'</li>';
            die();
        }

    }else{

        //Create full filename including path
        // Generate random filename
        $tmp = str_replace(array('.',' '), array('',''), microtime());

        if (!$tmp || $tmp == '') {
            $errors[] = "File must have a name";
        }     

        $newname = $tmp.'.'.$ext;                                

        //Check if file already exists on server
        if (file_exists($path.$newname)) {
            $errors[] = "A file with this name already exists";
        }

        if (count($errors)>0) {
        //The file has not correctly validated
            $imageError = 1;
            foreach($errors as $error) {
                echo '<li>'.$error.'</li>';
                die();
            }
        } 
      if (move_uploaded_file($_FILES[$image]['tmp_name'], $path.$newname)) {

            $uploadSuccesfull = 1;

        }else {
            $errors[] = "Server Error!";
            foreach($errors as $error) {
                echo '<li>'.$error.'</li>';
                die();
            }
        }

    }
}


// if no errors:

// save post (with filename if any); if it fails, delete image (if any)
if( $has_image == 1 ){

$query = "INSERT INTO posts
        (user_id, body, image, has_image, date)
        VALUES
        ('$user_id', '$body', '$newname', '$has_image', now())";

}else{

    $query = "INSERT INTO posts
        (user_id, body, has_image, date)
        VALUES
        ('$user_id', '$body', '$has_image', now())";

}

$result = $db->query($query);

// send response

//check to make sure the user was added
if( $db->affected_rows == 1 ){

    $user_id = $_SESSION['user_id'];

    $post_id = $db->insert_id;

    $query = "SELECT post_id, body, image, has_image
            FROM posts
            WHERE post_id = $post_id
            LIMIT 1";
    $result = $db->query($query);

    if($result->num_rows == 1){
        $row = $result->fetch_assoc();
    }

    $queryuser = "SELECT *
                FROM users
                WHERE user_id = $user_id
                LIMIT 1";
    $resultuser = $db->query($queryuser);
    if($resultuser->num_rows == 1){
        $rowuser = $resultuser->fetch_assoc();
    }


 if(!empty($row['avatar'])){ $userpic = $row['avatar']; }else{ $userpic = HOME_URL . 'img/avatar.jpg'; }

    if($row['has_image'] == 1){

?>
<article class="post">
    <div class="post-head cf">
        <a class="userpic" href=""><img src="<?php echo $userpic ?>" alt="<?php echo $rowuser['username'] ?>"></a>
        <a href="" class="username">
            <?php echo $rowuser['username']; ?>
        </a>
    </div>
    <img src="users/user_<?php echo $rowuser['user_id'] ?>/posts/<?php echo $row['image']; ?>" alt="">
    <div class="post-body">
        <div class="post-options">
            <a class="likes" href="">156 likes</a>
        </div>
        <p>
            <a class="username" href="">
                <?php echo $rowuser['username'] ?>
            </a>
            <?php echo $row['body'] ?>
        </p>
        <hr />
        <div class="cf">
            <a class="like hide-text" href="javascript:;">Like This Post</a>
            <form action="" class="comment">
                <input type="text" placeholder="Add a comment">
            </form>
        </div>
    </div>
</article>
<?php }else{ ?>

    <article class="post no-img">
        <div class="post-head cf">
            <a class="userpic" href=""><img src="<?php echo $userpic ?>" alt="<?php echo $rowuser['username'] ?>"></a>
            <a href="" class="username">
                <?php echo $rowuser['username'] ?>
            </a>
        </div>
        <div class="post-body">
            <p>
                <a class="username" href="">
                    <?php echo $rowuser['username'] ?>
                </a>
                <?php echo $row['body'] ?>
            </p>
            <div class="post-options">
                <a class="likes" href="">1 like</a>
            </div>
            <hr />
            <div class="cf">
                <a class="like hide-text" href="javascript:;">Like This Post</a>
                <form action="" class="comment">
                    <input type="text" placeholder="Add a comment">
                </form>
            </div>
        </div>
    </article>

    <?php }
    }else{

        echo 'There was a database error';

     }

die();