how to join two table in codeigniter easily[updated] | ci_model | ci_controller | codeigniter 3 -datainflow
As we discussed in more tutorials before to this, it is very simple by using AJAX, so for here are going to do that without refreshing the page and also the image will be removed by page by little animation effect . so we have to make database for that. let see the details about that.
DATABASE DETAILS
database name –> my_file_upload
table name –> file_list
column names –> id, file_name
FILES
- db.php
- index.php
- result.php
- delete_image.php
- see_image.php
the above files and JQuery min file in important too.
db.php
<?php $con = mysqli_connect("localhost","root","","my_file_upload"); if(!$con){ echo "Failed"; } ?>
index.php
<input type="file" id="file_1" name="file_1"><br> Or<br> <button onclick="see_image()">see uploaded Images</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> $('#file_1').change(function(e){ files = event.target.files; var data = new FormData(); $.each($('#file_1')[0].files,function(i,file){ data.append('file_1',file); }); console.log(); $.ajax({ type: 'post', url: 'result.php', processData : false, data: data, contentType : false, success: function(result){ console.log(result); } }); }); function see_image(){ window.location.href="see_image.php"; } </script>
see_image.php
<?php requiore_once('db.php'); ?> <html> <head> <style> div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: 127px; } div.desc { padding: 15px; text-align: center; } .btn_style{ background-color: red; height: 28px; width: 77px; color: white; border-bottom-style: outset; border-bottom-left-radius: 25px; border-top-right-radius: 29px; } </style> </head> <body> <?php $qry = mysqli_query($con,"SELECT * from `file_list` order by id DESC"); while($data = mysqli_fetch_assoc($qry)){ ?> <div class="gallery" id="my_image<?php echo $data['id']; ?>"> <a target="#" href="fjords.jpg"> <img src="my_file/<?php echo $data['file_name']; ?>" alt="Fjords" width="300" height="200"> </a> <div class="desc"><button class="btn_style" onclick="delete_image(<?php echo $data['id']; ?>)">Delete</button></div> </div> <?php } ?> </body> </html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> function delete_image(id){ $.ajax({ type: 'post', url: 'delete_image.php', data: {image_id:id}, success: function(result){ $('#my_image'+id).fadeOut(); } }); } </script>
result.php
<?php require_once('db.php'); $ext = pathinfo($_FILES['file_1']['name'],PATHINFO_EXTENSION); $new_file_name = time()."myimage".".".$ext; $qry = mysqli_query($con,"INSERT into file_list (`file_name`) value ('".$new_file_name."')"); move_uploaded_file($_FILES['file_1']['tmp_name'], 'my_file/'.$new_file_name); ?>
delete_image.php
<?php require_once('db.php'); $qry = mysqli_query($con,"SELECT * from `file_list` WHERE id='".$_POST['image_id']."'"); $data = mysqli_fetch_assoc($qry); $un = unlink("my_file/" . $data['file_name']); if($un){ $dlt = mysqli_query($con,"DELETE from file_list where id='".$_POST['image_id']."'"); } ?>
Related posts