JeffLiteral Ответов: 0

Как загрузить обрезанные изображения в каталог изображений и имя файла в базу данных?

Мне нужно, чтобы изображения были загружены в определенный "user_id", найденный в таблице "userprofile". У меня есть куча кодов, взятых из другого онлайн-источника. Вот следующие коды:

index.php

<?php
session_start();
include('database/dbconfig.php');
?>

<html>  
    <head>  
        <title>Make Price Range Slider using JQuery with PHP Ajax</title>  
		
		<script src="jquery.min.js"></script>  
		<script src="bootstrap.min.js"></script>
		<script src="croppie.js"></script>
		<link rel="stylesheet" href="bootstrap.min.css" />
		<link rel="stylesheet" href="croppie.css" />

<style>
.navbar-custom {
    color: #FFFFFF;
    background-color: #B7E772;
}
.navbar .navbar-toggler .icon-bar {
  background: black !important;
}
.shadw {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
    </head>  
    <body>
    
    <div class="container-fluid" style="margin-top:-31px;background-color:#E8FFC7;">
        <div class="container">
        <div class="jumbotron jumbotron-fluid" style="margin-bottom:-31px;background-color:#E8FFC7;">
            <img class="img-fluid img-responsive" src="../images/LRrepository-header-banner.png" alt="">
        </div>
    </div>
    </div>


<nav class="navbar navbar-custom shadw">
  <div class="container-fluid">
      <button type="button" class="navbar-toggle navbar-toggler  navbar-toggler-right" data-toggle="collapse" data-target="#myNavbar">
        <span class="navbar-toggler-icon icon-bar"></span>
        <span class="navbar-toggler-icon icon-bar"></span>
        <span class="navbar-toggler-icon icon-bar"></span>                        
      </button>
    <div class="container">
    <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li><a href="../index.php"><span style="color:#000000;">HOME</span></a></li>
      <li><a href="#"><span style="color:#000000;">Update Profile Photo</span></a></li>
    </ul>

    </div>
  </div>
</div>
</nav>


                        </div>
                    </li>
                </ul>
                <!-- <a><img src="images/no-image2.png" class="rounded-circle" width="32px"></a>
                <span class="justify-content-end navbar-text text-white dragright"><small>Profile</small></span> -->
            </div>
        </div>


    </nav>


        <div class="container">
        <a href="../profile.php"><button type="button" class="btn btn-success">PROFILE</button></a>
          <br />
      <!-- <h3 align="center"></h3> -->
      <br />
      <br />
			<div class="panel panel-default">
  				<div class="panel-heading">Select Profile Photo</div>
  				<div class="panel-body" align="center">
  					<input type="file" name="upload_image" id="upload_image" />
  					<br />
  					<div id="uploaded_image"></div>
  				</div>
  			</div>
  		</div>
    </body>  
</html>

<?php

$query = "SELECT * FROM `userprofile` WHERE `user__email` = '".$_SESSION['username']."' ";
$query_run = mysqli_query($connection,$query);

if(mysqli_num_rows($query_run))
{
    while($row = mysqli_fetch_array($query_run))
    {
?>
<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 id="image_demo" style="width:350px; margin-top:30px"></div>
  					</div>
  					<div class="col-md-4" style="padding-top:30px;">
              <!-- <form action="" method="POST"> -->
              <input type="hidden" name="profile_id" value="<?php echo $row['user_id']?>">
						    <button name="upload_photo" class="btn btn-primary crop_image">Crop & Upload Image</button>
                
              <!-- </form> -->
					</div>
				</div>
      		</div>
      		<div class="modal-footer">
        		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      		</div>

          <?php
                                    }
                                    
                                }
                                else
                                {
                                    $_SESSION ['status'] = "Not Yet Logged In!";
                                    session_destroy();
                                    $_SESSION = array();
                                    header("location:login.php");
                                }
                            ?>

    	</div>
    </div>
</div>

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

	$image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:200,
      height:200,
      type:'circle' //square
    },
    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>


А коды внутри upload.php

<?php
session_start();
include('database/dbconfig.php');
//upload.php

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

	$query = "UPDATE `userprofile` SET `user_photo`='$data'";
    $query_run = mysqli_query($connection, $query);
	

	$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"/>';

}

?>


Что я уже пробовал:

Я не могу найти идеального решения этой проблемы. Я надеюсь, что вы могли бы помочь мне с этим. Спасибо!

Richard MacCutchan

"У меня есть куча кодов, взятых из другого онлайн-источника"
Это, вероятно, ошибка, если вы полностью не понимаете, что делает код. Кроме того, вы на самом деле не задали вопрос.

Richard Deeming 

$query = "UPDATE `userprofile` SET `user_photo`='$data'";

Ваш код уязвим для SQL-инъекция[^]. НИКОГДА используйте конкатенацию строк для построения SQL-запроса. ВСЕГДА используйте параметризованный запрос.

PHP: SQL-инъекция - руководство пользователя[^]

W∴ Balboos, GHB

Итак, за неимением дополнительной информации, похоже, вы скопировали много кода из онлайн-источников и хотите, чтобы один из нас собрал его для вас в рабочий проект ?

Начните здесь: https://www.w3schools.com/php/default.asp . Здесь есть все, что вам нужно знать. С примерами. Если вам также нужен их учебник по SQL/MySQL, он там есть.

Пост назад с реальными проблемами, основанными на вашей собственной работе (копирование/вставка из онлайн-источников не считается работой или "тем, что вы пробовали".)

Gerry Schmitz

Поскольку вы не нашли "идеального" решения, вы должны были найти "а" решение. Но вы хотите, чтобы мы сделали его "идеальным"? Как вы это узнаете?

0 Ответов