Wie überprüft man, ob das Bild hochgeladen wurde? AJAX PHP

Question

Ich versuche, eine Web-App zu entwickeln, wo Sie Beiträge erstellen können und ein (nur ein) Bild mit ihm haben, aber Sie müssen nicht haben, es könnte auch nur ein Textbeitrag sein. Dies ist nur ein persönliches Projekt, um mit php und ajax besser zu werden, also mache ich das vielleicht falsch ... Was ich versuche zu tun ist, senden Sie die Formulardaten an eine PHP-Funktion, die bestimmen wird, ob sie hochgeladen wird oder nicht, dann, was ich tun möchte, ist, wenn es erfolgreich ist, senden Sie den Bildnamen zu einer anderen Funktion, um den Beitrag in die Datenbank einzufügen, aber wenn der Bildupload nicht erfolgreich ist, zeigen Sie die Fehler an. Auch wenn es nicht erfolgreich ist, aber der Fehler ist "Kein Bild hochgeladen", gehen Sie voran und erstellen Sie den Beitrag trotzdem. Hier

ist das, was ich bisher

Die 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(); 
       } 
      }); 
     } 
    }); 

}); 

Die PHP Nach einigen Recherchen fand ich heraus, dass, wenn es ein Fehler Ich habe es als JSON zurück zu senden und dann prüfen, die Ergebnisse in jQuery. Allerdings habe ich noch, dass die Arbeit zu bekommen ...

<?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(); 

wirklich schätzen jede Hilfe oder Anregungen, wie man es besser machen BTW Das zur Zeit arbeitet, das einzige Problem ist, dass die Post immer, ob das Bild erstellt wird hochgeladen oder nicht.

Normalerweise würde ich am selben Tag zumindest eine Antwort bekommen ... Ist diese Frage so schlimm? XD Ich habe gehört, dass die Bearbeitung helfen wird, die Frage aufzuwerfen.

Answer 1

Was Sie sagten, dass Sie wollen, ist anders als das, was Sie tatsächlich getan haben. In deinem Code versuchst du zwei AJAX-Aufrufe: (1) lade das Bild hoch und (2) speichere den Beitrag.

Warum nicht beides auf einmal machen? Auf diese Weise müssen Sie nicht auf die Antwort des Hochladens des Bildes (oder keines) warten, um einen neuen Beitrag zu erstellen.

$(".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 
     } 
    }); 
}); 

Dann in Ihrem create-post-feed.php, fusionieren die Logik Sie in image-upload.php mit dem aktuellen Code. Ich mache es normalerweise so:

// 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 

Answer 2

@Mikey So sieht meine neue php-Datei aus. Jetzt ist mein Problem, wie mache ich es so, dass, wenn es mit jQuery erfolgreich ist, der neue Beitrag an den Feed anfügen, und wenn es nicht ist, zeigen Sie die Fehler in einem separaten div an?

<?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();