δευτερο Image upload με crop

[hdonoblepsias]

καλησπέρα. έκανα τα βήματα που περιγράφονται εδώ για image crop & upload και στην πρώτη φώτο μου δούλεψε άψογα.

Θέλω όμως να το κάνω και για ένα δευτερο πεδίο. Αντέγραψα το modal τα script κλπ, άλλαξα και τα ids αλλά δεν ανοίγει το popup  όταν αλλάζω εικόνα στο 2ο πεδίο.

Δηλαδή τα 2 input, modal και script τα έκανα έτσι.
 

       <input type="file" name="upload_image" id="upload_image" accept="image/*" />
       <input type="file" name="upload_image2" id="upload_image2" accept="image/*" />

<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">×</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 class="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>

<div id="uploadimageModal2" class="modal" role="dialog">
 <div class="modal-dialog">
  <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</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:100,
      height:60,
      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:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

});  
</script>

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

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

  $('#upload_image2').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]);
    $('#uploadimageModal2').modal('show');
  });

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

});  
</script>

Με αυτό το τρόπο, ανοίγει και δουλεύει το modal για πρώτο input αλλά δεν ανοίγει το δευτερο. Αν αλλάξω στο δευτερο modal και script τα id των image_demo και τα κάνω πχ image_demo1 και image_demo2, τότε ανοίγουν τα modal αλλά βλέπω εικόνα (preview) μονο στο δευτερο.

 Αν αλλάξω τώρα στο δευτερο script όπου λεει $image_crop. και το κάνω $image_crop2, τότε ανοίγουν και τα 2 modal, βλέπω και στα 2 preview, αλλά δεν δουλευουν τα κουμπιά.

Βλέπετε που είναι το πρόβλημα ωστε να μπορώ να τα χρησιμοποιήσω και τα 2?

Επεξ/σία 7 Φεβρουαρίου 2019 από hdonoblepsias

[kosnik]

Εχεις αυτο 2 φορες

$('.crop_image').click(function(event){

φτιαξε 2 τελειως διακριτα σετ για καθε εικονα-input, modals με διαφορετικες κλασεις που να μη μπερδευονται. Βαλε .crop_image_2  στο δευτερο κουμπι και αλλαξε αντιστοιχα το script, γενικα φτιαξε λίγο τον κωδικα ωστε να μην έχει overlapping cases

Στο ενα modal εχεις class  .image_demo, στο αλλο εχεις id #image_demo, στο script εχεις 2 φορες το

$image_crop = $('.image_demo').croppie({

Μάζεψε αυτα for starters...

[leonidas_fs]

Άσχετο αλλά το συγκεκριμένο δεν παίζει πολύ καλά από κινητό! Το slider κάνει θέματα, και εγώ το είχα δει παλιότερα και με ξενέρωσε λίγο το slider!

[hdonoblepsias]

5 ώρες πριν, kosnik είπε

Εχεις αυτο 2 φορες

$('.crop_image').click(function(event){

φτιαξε 2 τελειως διακριτα σετ για καθε εικονα-input, modals με διαφορετικες κλασεις που να μη μπερδευονται. Βαλε .crop_image_2  στο δευτερο κουμπι και αλλαξε αντιστοιχα το script, γενικα φτιαξε λίγο τον κωδικα ωστε να μην έχει overlapping cases

Στο ενα modal εχεις class  .image_demo, στο αλλο εχεις id #image_demo, στο script εχεις 2 φορες το

$image_crop = $('.image_demo').croppie({

Μάζεψε αυτα for starters...

Ναι τελικά μου είχαν ξεφύγει αρκετά λάθη, που λόγω "ζαλάδας" απο τις πολλές ώρες, δεν τα έβλεπα. Τα διόρθωσα και δουλευουν. Thanks!

5 λεπτά πριν, leonidas_fs είπε

Άσχετο αλλά το συγκεκριμένο δεν παίζει πολύ καλά από κινητό! Το slider κάνει θέματα, και εγώ το είχα δει παλιότερα και με ξενέρωσε λίγο το slider!

Έχεις βρει κάποιο άλλο plugin που να δουλεύει καλύτερα?

[hdonoblepsias]

Ρε παίδες κάτι τελευταίο γιατί δεν ξερω και πως να το ψαξω.

Όταν ανοίγει το modal, φτιάχνω την εικόνα όπως θέλω και πατάω crop & upload, αν είναι μεγάλη η εικόνα, κάνει κάποια ώρα μέχρι να κλείσει το modal και να ανανεωθεί το div και φαίνεται σαν να κόλλησε. Υπάρχει κάποιος τρόπος να προσθέσω κάτι στο παραπάνω κώδικα, ωστέ από την στιγμή που θα πατήσω το κουμπί crop & upload να εμφανιστεί από πάνω ένα κειμενάκι "Παρακαλούμε περιμένετε, η εικόνα ανεβαίνει"?

[kosnik]

Μπορείς να βάλεις το κείμενο σε ενα div or sth με display none, και πάιζεις με jquery show/hide αμέσως πριν και στο success του ajax που στέλνεις αντίστοιχα.

[rafinos]

Εγώ στη θέση σου θα έκανα ένα fullscreen transparent div με μεγαλύτερο z-index που στη μέση (οριζόντια και κάθετα) θα είχα ένα loading gif ή ένα loading bar (ή ότι σου αρέσει) φτιαγμένο με css και θα το εμφάνιζα-έκρυβα μεταξύ των ajax calls.

Για παράδειγμα το παρακάτω:

/* css */
#loader{
	display: none;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
	position: fixed;
	background-color: rgba(191, 191, 191, 0.5);
}

.loader{
	position: absolute;
	border: 6px solid #f3f3f3;
	border-top: 6px solid #878787;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin-left: -25px;
	margin-top: -25px;
	animation: spin 1s linear infinite;
}


<!-- html -->
<div id="loader">
	<div class="loader"></div>
</div>

//jquery
//ajaxStart and ajaxStop
$(document).ajaxStart(function(){
	$("#loader").show();
}).ajaxStop(function(){
	$("#loader").hide();
});