Create a form in your HTML file that allows the user to select a file to upload. You can use an input element with the type attribute set to “file” to allow the user to select a file.
<body> <!-- upload form start --> <div class="card"> <div id="notification" style="padding:10px; color:white"></div><br/> <div class="container" style="padding:20px"> <h3>Upload Partner Logo</h3><br/> <div> <input type="file" name="partner_logo" id="partner_logo" class="form-control" onchange="previewImage(event);" /><br/> <span id="msg" style="color:red"></span> </div> <button type="button" class="btn btn-success" id="submitbtn">Submit</button><br/><br/> <div class="preview"> <img id="preview-selected-image" /> </div> </div> <br/> </div> <style> .image-preview-container { width: 300px; margin: 0 auto; border: 1px solid rgba(0, 0, 0, 0.1); padding: 3rem; border-radius: 20px; } .image-preview-container img { width: 300px; height:100px; display: none; margin-bottom: 30px; } .image-preview-container input { display: none; } </style> <!-- code for display image before uploading --> <script> const previewImage = (event) => { const imageFiles = event.target.files; const imageFilesLength = imageFiles.length; if (imageFilesLength > 0) { const imageSrc = URL.createObjectURL(imageFiles[0]); const imagePreviewElement = document.querySelector("#preview-selected-image"); imagePreviewElement.src = imageSrc; imagePreviewElement.style.display = "block"; imagePreviewElement.style.width = "300px"; imagePreviewElement.style.height = "100px"; imagePreviewElement.style.border = "1px solid #ccc"; } }; </script> <!-- code for insert data --> <script type="text/javascript"> $(document).ready(function(){ $(document).on('click','#submitbtn',function(){ var property = document.getElementById('partner_logo').files[0]; var image_name = property.name; var image_extension = image_name.split('.').pop().toLowerCase(); var form_data = new FormData(); form_data.append("partner_logo",property); $.ajax({ url:'partner_submit.php', method:'POST', data:form_data, contentType:false, cache:false, processData:false, beforeSend:function(){ $('#submitbtn').html('Loading...'); $('#submitbtn').css('background', '#ccc'); $('#submitbtn').css('border', 'none'); $('#submitbtn').css('pointer-events', 'none'); }, success:function(data){ if(data == 504){ $('#preview-selected-image').hide(); $('#notification').show(); $('#notification').text('Invalid Image Format'); $('#notification').css('background', 'red'); } else{ $('#preview-selected-image').hide(); $('#notification').show(); $('#notification').text('Successfully Saved !'); $('#notification').css('background', 'green'); $('#submitbtn').css('background', 'green'); $('#submitbtn').css('border', '1px solid green'); $('#submitbtn').css('pointer-events', 'auto'); $('#submitbtn').html('Submit'); $('#logo_load').html(data); ajaloadlogo(); } } }); }); }); </script> <!-- code for fetch data --> <script type="text/javascript"> $(document).ready(function(){ function ajaloadlogo(){ $.ajax({ url:'fetch_partner_logo.php', type:'POST', success:function(data){ $('#logo_load').html(data); } }); } ajaloadlogo(); }); </script> <tbody id="logo_load"> </tbody> </body>
PHP PART
=> insert_image.php
<?php include_once('dbNew.php'); $name = $_FILES['partner_logo']['name']; $ext = pathinfo($name, PATHINFO_EXTENSION); $newname = rand(10000, 00000).'logo.'.$ext; $path = 'img/'.$newname; $url = "admin/app/img/".$newname; $valid_ext = ['jpg', 'png', 'jpeg', 'gif']; if(in_array($ext, $valid_ext)){ if(move_uploaded_file($_FILES['partner_logo']['tmp_name'], $path)){ $sql = "INSERT INTO partner_logo (path) VALUES ('$url')"; if (mysqli_query($conn, $sql)) { $siteurl = "https://forlancer.in/"; $sql = "SELECT * FROM partner_logo"; $result = $conn->query($sql); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { echo '<tr> <td>'.$siteurl.$row['path'].'</td> <td><img src="'.$siteurl.$row['path'].'" width="90px" height="50px" /></td> <td><button class="btn dltbtn btn-danger" id="dltid'.$row['id'].'" val="'.$row['id'].'">Delete</button></td></tr>'; } } } } } // else part of image format else{ echo '504'; die(); } ?> <script type="text/javascript"> $(document).ready(function(){ $('.dltbtn').click(function(){ let dltid = $(this).attr('val'); $(this).text('Loading...'); $.ajax({ url:'delete_partner_logo.php', type:'POST', data: {id: dltid}, success:function(data){ if(data == '200'){ $('#notification').show(); $('#notification').text('Successfully Deleted !'); $('#notification').css('background', 'red'); ajaloadlogo(); window.location.href="partner.php"; } else{ $('#notification').show(); $('#notification').text('Something Went Wrong !'); $('#notification').css('background', 'red'); ajaloadlogo(); window.location.href="partner.php"; } } }); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ function ajaloadlogo(){ $.ajax({ url:'fetch_partner_logo.php', type:'POST', success:function(data){ $('#logo_load').html(data); } }); } }); </script> => fetch_image.php <?php include('dbNew.php'); $siteurl = "https://forlancer.in/"; $sql = "SELECT * FROM partner_logo"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo '<tr> <td>'.$siteurl.$row['path'].'</td> <td><img src="'.$siteurl.$row['path'].'" width="90px" height="50px" /></td> <td><button class="btn dltbtn btn-danger" id="dltid'.$row['id'].'" val="'.$row['id'].'">Delete</button></td></tr>'; } } else { echo "<h3>No Data Found !"; } ?> <script type="text/javascript"> $(document).ready(function(){ $('.dltbtn').click(function(){ let dltid = $(this).attr('val'); $(this).text('Loading...'); $.ajax({ url:'delete_partner_logo.php', type:'POST', data: {id: dltid}, success:function(data){ if(data == '200'){ $('#notification').show(); $('#notification').text('Successfully Deleted !'); $('#notification').css('background', 'red'); ajaloadlogo(); window.location.href="partner.php"; } else{ $('#notification').show(); $('#notification').text('Something Went Wrong !'); $('#notification').css('background', 'red'); ajaloadlogo(); window.location.href="partner.php"; } } }); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ function ajaloadlogo(){ $.ajax({ url:'fetch_partner_logo.php', type:'POST', success:function(data){ $('#logo_load').html(data); } }); } }); </script> => delete-php <?php include('dbNew.php'); $dltid = $_POST['id']; $sql = "DELETE FROM partner_logo WHERE id='$dltid'"; if ($conn->query($sql) === TRUE) { echo "200"; } else { } ?>
