Codeigniter και ajax upload

sinikos · 14 Οκτωβρίου 2018

Καλησπέρα. Έχω μια φόρμα που αλλάζουν τα στοιχεία τους οι χρήστες στο site μου. Username, name, pass κλπ. Θέλω επίσης να μπορούν να ανεβάζουν ένα avatar το οποίο θα το κάνουν crop σε συγκεκριμένα μεγέθη. Βρήκα κάτι τέτοιο και προσπαθώ να το προσαρμόσω στο MVC πρότυπο του codeigniter.

Αυτά που έχ φτιάξει μέχρι τώρα (έχω δοκιμάσει οτι μπορείτε να φανταστειτε), μπορείτε να τα δείτε στο spoiler. Το θέμα είναι οτι όταν πατάω το upload δεν κάνει τίποτα απολύτως. Πως μπορώ να ανεβάσω την εικόνα και να ενημερώσω την βάση.

α) Μπορώ να κάνω να δουλέψει αυτη η μέθοδος;

β) Υπάρχει πιο εύκολος τρόπος;

γ) Μπορώ να έχω κάποιες σελίδες που να δουλεύουν κάπως χωρίς mvc. δηλαδή κλασσικά με .php αρχεία;

Ευχαριστώ πολύ!!!

Έφτιαξα για αρχή, ένα αρχείο views/test.php

<html>  
    <head>  
        <title>Make Price Range Slider using JQuery with PHP Ajax</title>  
  
   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <script src="<?php echo base_url();?>assets/js/jquery.js"></script>
    <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>
         <link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="<?php echo base_url();?>assets/css/croppie.css">
      <script src="<?php echo base_url();?>assets/js/croppie.js"></script>  
        
    </head>  
    <body>  
        <div class="container">
          <br />
      <h3 align="center">Image Crop & Upload using JQuery with PHP Ajax</h3>
      <br />
      <br />
   <div class="panel panel-default">
      <div class="panel-heading">Select Profile Image</div>
      <div class="panel-body" align="center">
       <input type="file" name="upload_image" id="upload_image" accept="image/*" />
       <br />
       <div id="uploaded_image"></div>
      </div>
     </div>
    </div>
    </body>  
</html>

<div id="uploadimageModal" class="modal" role="dialog">
 <div class="modal-dialog">
  <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Upload & Crop Image</h4>
        </div>
        <div class="modal-body">
          <div class="row">
       <div class="col-md-8 text-center">
        <div id="image_demo" style="width:350px; margin-top:30px"></div>
       </div>
       <div class="col-md-4" style="padding-top:30px;">
        <br />
        <br />
        <br/>
        <button class="btn btn-success crop_image">Crop & Upload Image</button>
     </div>
    </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
     </div>
    </div>
</div>

<script>  
$(document).ready(function(){

 $image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:200,
      height:100,
      type:'square' //circle
    },
    boundary:{
      width:300,
      height:300
    }
  });

  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimageModal').modal('show');
  });

  $('.crop_image').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"/ajax_uploads/avatar/",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

});  
</script>

και ένα controllers/Ajax_uploads.php

<?php

class Ajax_uploads extends CI_Controller {

        public function avatar(){
            
if(isset($_POST["image"]))
{
	$data = $_POST["image"];

	$image_array_1 = explode(";", $data);

	$image_array_2 = explode(",", $image_array_1[1]);


	$data = base64_decode($image_array_2[1]);

	$imageName = time() . '.png';

	file_put_contents($imageName, $data);

	echo '<img src="'.$imageName.'" class="img-thumbnail" />';

}         
        }          
}
?>

Αργότερα λογικά θα φτιάξω και ένα model να μιλήσει με την βάση, αλλά ακόμα και τώρα δεν γίνεται τίποτα.

Σύνδεση

Codeigniter και ajax upload

Προτεινόμενες αναρτήσεις

sinikos

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση