0

First of all, I've just met with ajax and jquery and I must admit they seem pretty interesting. But I lost quite some time on figuring out why are my results in uploading img-s always the same.The idea is creating a page where I could import multiple images with some restrictions such as size and extension,but for some reason errors just aren't printing. It just prints alert("Image Uploaded") no matter what the result. This is the ajax part of my html:

<script>  
 $(document).ready(function(){  
      $('#uploadForm').on('submit', function(e){  
           e.preventDefault();  
           $.ajax({  
                url: "upload.php",  
                type: "POST",  
                data: new FormData(this),  
                contentType: false,  
                processData:false,  
                success: function(data)  
                {  
                     $("#gallery").html(data);  
                     alert("Image Uploaded");  
                }  
           });  
      });  
 });  

 </script>

And this is the upload.php that I simply call in my html file:

 <?php  
 //upload.php  
 $output = '';  
 if(is_array($_FILES))   
 {  
      foreach ($_FILES['files']['name'] as $name => $value)  
      {  
      $totalImageIndex = ($name+1);
           $file_name = explode(".", $_FILES['files']['name'][$name]);  
           $file_size = $_FILES['files']['size'][$name];
           $allowed_ext = array("png", "gif");  
           if(in_array($file_name[1], $allowed_ext))  
           {  
            if($totalImageIndex <= 5 ) {
                // 2 MB is 2097152 bytes.
                if($file_size < 2097152){
                $new_name = $totalImageIndex . '.' . $file_name[1];  
                $sourcePath = $_FILES['files']['tmp_name'][$name]; 
                $targetPath = "slike/".$new_name;  
                if(move_uploaded_file($sourcePath, $targetPath)) 

                {  
                     $output .= '<img src="'.$targetPath.'" width="150px" height="180px" />';  
                }

                }   
else { continue ; }             
           }    else echo 'file is too big!';       
      } else   echo 'wrong file format!';     
 }
 echo $output;}

 ?>  

Any idea or suggestion would be appriciated, thank u in advance!

3
  • 1
    The "success" is a callback triggered when the request is successful... What you do on PHP side is not the same. So you should echo a response that you will retreive in data. Then test it to know what is the PHP result. Jul 27, 2018 at 20:40
  • This other answer I recently made may help you : stackoverflow.com/a/51544745/2159528 Jul 27, 2018 at 20:40
  • Don't confuse the case where ajax call fails with the case when it successfully returns a refusal case (failure) of your internal app logic. Ajax call fails if the status of the response is other than 200. (404, 403, 500 - any other error). To simply this many devs choose to throw server errors on refusal cases.
    – tao
    Jul 27, 2018 at 21:57

1 Answer 1

0

In ajax on success you will get the data back that you echoed on your php file so either you get the image back or the error back you can simply alert(data); only and see what you getting in your ajax code you are alerting alert(image uploded) which will always be called as you are getting an error data also as success just remove that alert and do only alert(data) and you will see the error if any

1
  • Thank you very much everybody, u are amazing 😁
    – J.Doe
    Jul 28, 2018 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.