search

Hướng dẫn php profile picture upload and display - tải lên và hiển thị ảnh hồ sơ php

1 năms trước
Trả lời: 0
Lượt xem: 20

Tôi muốn người dùng có thể tải lên ảnh hồ sơ (có thể là 

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
9 hoặc 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
0) và tôi cũng muốn điều này được hiển thị trên hồ sơ của họ. Tôi đã viết một số mã, dựa trên các nguồn tôi tìm thấy ở đây, trên StackOverflow và Google. Tuy nhiên, nó dường như không hoạt động và tôi không thể tìm thấy sai lầm của mình.

Show

Đây là HTML

        <form action="account_settings.php" method="POST">
            <input type="file" name="profilePicture"><br><br>
            <input type="submit" value="Change!">
        </form>

Đây là cách tải lên tệp sẽ được xử lý.

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.

Mã dưới đây được sử dụng để hiển thị hình ảnh. Tôi đã thử nghiệm nó bằng cách đặt một hình ảnh trong thư mục hình ảnh hồ sơ và nó đã hiển thị hình ảnh. Tuy nhiên, vẫn còn một vấn đề. Mọi người được phép tải lên 

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
9 hoặc 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
0, làm thế nào tôi có thể làm cho trang web hiển thị hình ảnh (tìm hình ảnh hồ sơ với phần mở rộng phù hợp).

Tôi đã đặt mã này bên trong thuộc tính 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
3 của 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
4TAG.

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);

Tôi hy vọng ai đó có thể giúp đỡ, cảm ơn trước! PS. Đây là bài viết đầu tiên của tôi trên Stack Overflow:-D!

Hiển thị trạng thái tải lên hình ảnh lên người dùng ..

Xử lý hình ảnh hồ sơ người dùng bằng Froala và PHP - Hướng dẫn

  • Trong hướng dẫn này, chúng tôi sẽ tìm hiểu cách sử dụng công cụ tải lên hình ảnh Froala để tải lên và xóa hình ảnh khỏi máy chủ PHP.
  • Bước 1: Hoàn thành mã HTML biểu mẫu
  • Giải thích mã khởi tạo Froala
  • Bước 2: Tải xuống SDK FROALA PHP
  • Bước 3: Tải lên và lưu trữ hình ảnh từ thiết bị của bạn lên máy chủ
  • Hiển thị hình ảnh được tải lên thay vì hình ảnh giữ chỗ khi một trang được làm mới
  • Bước 4: Tải hình ảnh từ URL lên máy chủ
  • Bước 5: Trình quản lý hình ảnh thiết lập
    • Bước 6: Xóa hình ảnh
    • 6.1: Xóa hình ảnh khỏi menu bật lên hình ảnh
  • 6.2: Xóa hình ảnh khỏi người tưởng tượng
    • Bước 7: Xác thực hình ảnh
    • 7.1: Xác thực hình ảnh ở phía máy khách
  • 7.2: Xác thực hình ảnh ở phía máy chủ
  • Tải xuống mã đầy đủ
  • Bước 8: Xử lý lỗi trong khi tải lên hình ảnh
    • Bước 9: Thay đổi kích thước hình ảnh
    • 9.1: Thay đổi kích thước hình ảnh ở phía máy khách
  • Bước 10: Tải hình ảnh lên S3
  • 9.2: Thay đổi kích thước hình ảnh ở phía máy chủ

Bước 11: Thêm trình soạn thảo văn bản tiếp cận vào biểu mẫu của bạn

Bắt đầu

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>

Thực hiện theo hướng dẫn bắt đầu, bây giờ bạn đã tạo một tệp index.php với mã sau:

Bước 1: Hoàn thành mã HTML biểu mẫu

Trong mã trên, chúng tôi đã thêm phần tử hình ảnh. Để biến điều này thành một ví dụ biểu mẫu hồ sơ, hãy thêm tên, họ và các trường đầu vào giới tính. Và hãy thêm bảng kiểu bootstrap để tạo kiểu cho các yếu tố hình thức.

Hướng dẫn php profile picture upload and display - tải lên và hiển thị ảnh hồ sơ php

Cấu trúc thư mục

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>

Và mã index.php là

Hướng dẫn php profile picture upload and display - tải lên và hiển thị ảnh hồ sơ php

Bước 1: Hoàn thành mã HTML biểu mẫu

Giải thích mã khởi tạo Froala

      /** The Editor initialization code **/
     <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
       }
       });
   </script>

Bước 2: Tải xuống SDK FROALA PHPFroalaEditor constructor function accepts three arguments:

  1. Bước 3: Tải lên và lưu trữ hình ảnh từ thiết bị của bạn lên máy chủ
  2. Hiển thị hình ảnh được tải lên thay vì hình ảnh giữ chỗ khi một trang được làm mới
  3. Bước 4: Tải hình ảnh từ URL lên máy chủ

Bước 5: Trình quản lý hình ảnh thiết lập

  1. Bước 6: Xóa hình ảnh

    6.1: Xóa hình ảnh khỏi menu bật lên hình ảnh

  2. imageEditButtons:

    6.2: Xóa hình ảnh khỏi người tưởng tượng

  3. Bước 7: Xác thực hình ảnh

    Trong tùy chọn này, bạn có thể chỉ định các nút sẽ được hiển thị tại menu bật lên hình ảnh Chèn. Bạn có thể chỉ định ở đây các tùy chọn để tải lên hình ảnh cũng như nút quay lại để đóng menu bật lên.

Bằng cách khởi tạo trình chỉnh sửa froala như trong mã trên, giờ đây bạn có thể thấy thay thế và xóa các tùy chọn khi bạn nhấp vào hình ảnh.

Bước 2: Tải xuống SDK FROALA PHP

Tải xuống Froala PHP SDK bằng phương pháp ưa thích của bạn. Đối với bản demo này, chúng tôi đã cài đặt thư viện SDK bằng liên kết trực tiếp. Sau đó, chúng tôi đã tạo một thư mục mới tại thư mục cơ sở dự án và trích xuất các tệp SDK vào thư mục đó.

Hướng dẫn php profile picture upload and display - tải lên và hiển thị ảnh hồ sơ php

Lưu ý: Froala PHP SDK yêu cầu các tiện ích mở rộng FileInfo và Imagick phải được bật. Phần mở rộng hình ảnh là cần thiết để thay đổi kích thước hình ảnh. Vì chúng tôi sẽ không thay đổi kích thước hình ảnh trong ví dụ này, tôi đã xóa nó khỏi hàm 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
5 trong tệp lib/froalaeditor.php để không gặp lỗi nếu phần mở rộng không được bật trên máy chủ. Froala PHP SDK requires FileInFo and Imagick extensions to be enabled. The Imagick extension is required for resizing images. Since we will not resize images in this example, I removed it from the 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
5 function in the lib/FroalaEditor.php file to not get an error if the extension is not enabled on the server.

Bước 3: Tải lên và lưu trữ hình ảnh từ thiết bị của bạn lên máy chủ

Đối với bước này, chúng ta cần:

  1. Xác định đường dẫn của thư mục mà chúng tôi sẽ sử dụng để lưu trữ hình ảnh người dùng. Đối với mục đích demo này, chúng tôi sẽ lưu trữ hình ảnh tại thư mục Storage \ user1 \ Images.
  2. Đặt tùy chọn 
    <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
    6 Froala thành đường dẫn của tệp PHP sẽ xử lý yêu cầu tải lên hình ảnh từ máy khách. Đây sẽ là một tệp PHP mới, trong bản demo này, chúng tôi sẽ tạo tại thư mục cơ sở của dự án với tên upload.php.
  3. Đặt loại yêu cầu trong tùy chọn 
    <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
    7

     <script>
         /** The Editor initialization code **/
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
         //Set the request type
         imageUploadMethod:'POST',
         //Set the image upload URl.
         imageUploadURL:'upload.php'
         });
     </script>

4. Trong tệp upload.php, chúng ta phải trả về một đối tượng có thuộc tính liên kết là URL của hình ảnh được tải lên. Froala SDK làm cho điều này khá đơn giản bằng cách gọi 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
8 và chuyển đường dẫn lưu trữ hình ảnh làm đối số đầu tiên.

     <?php
         /** upload.php file **/
     
         require 'sdk/lib/FroalaEditor.php';
         // Store the image.
         try{  
               $response = FroalaEditor_Image::upload('/fro-demos/img/storage/user1/images/');
          //Set the request type
            echo stripslashes(json_encode($response));
            }
             catch(Exception $e) {
            http_response_code(404);
	?>

Lưu ý: Để hình ảnh được tải lên được lưu trữ chính xác, máy chủ nên có quyền viết trong thư mục tải lên. Ngoài ra, bạn nên kiểm tra xem hình ảnh được tải lên có thể truy cập công khai trong trình duyệt để nó có thể được hiển thị cho người dùng của bạn. For the uploaded image to be stored correctly, the server should have the rights to write in the uploads folder. Additionally, you should check that the uploaded image is publicly accessible in the browser so it can be displayed to your users.

Bây giờ, nếu bạn mở biểu mẫu trong trình duyệt và tải lên hình ảnh từ máy tính của bạn, nó sẽ được lưu trữ tại thư mục Storage \ user1 \ Images.

Hiển thị hình ảnh được tải lên thay vì hình ảnh giữ chỗ khi trang được làm mới

Chúng tôi có hai trường hợp:

  1. Chỉ lưu trữ hình ảnh được tải lên cuối cùng và mỗi lần tải lên hình ảnh mới, nó sẽ thay thế hình ảnh cũ. Trong trường hợp này, tất cả những gì chúng ta cần làm là kiểm tra xem thư mục lưu trữ có hình ảnh để hiển thị không. Nếu nó không có bất kỳ hình ảnh nào, chúng tôi sẽ hiển thị hình ảnh giữ chỗ.
  2. Cho phép người dùng lưu trữ nhiều hình ảnh trong thư mục lưu trữ. Trong trường hợp này, bạn cũng cần lưu trữ tên tệp hình ảnh được tải lên để sử dụng để hiển thị hình ảnh sau, trong một ứng dụng thực, bạn có thể lưu trữ tên tệp hình ảnh trong bảng người dùng trong cơ sở dữ liệu, nhưng đối với bản demo này, chúng tôi sẽ lưu trữ nó Tệp JSON tại Storage \ user1 \ Images \ Image_Name.txt.

Trong Toturial này, chúng tôi sẽ thực hiện trường hợp thứ hai. Mở tệp upload.php và thêm dòng sau để lưu tên tệp hình ảnh được tải lên tại tệp Image_Name.txt

    //store image link in a file
    file_put_contents( $_SERVER['DOCUMENT_ROOT'] . '/fro-demos/img/storage/user1/images/image_name.txt', $response);

Mã đầy đủ:

     <?php
       /** upload.php file **/
     
       require 'sdk/lib/FroalaEditor.php';
       // Store the image.
          try {      
                    $response = FroalaEditor_Image::upload('/fro-demos/img/storage/user1/images/');
                    $response = json_encode($response);
                     //store image link in a file
                    file_put_contents( $_SERVER['DOCUMENT_ROOT'] . '/fro-demos/img/storage/user1/images/image_name.txt', $response);
                    //return the response
                    echo stripslashes($response);
                    }
                    catch ( Exception $e) {
                    http_response_code( 404);
                 }
	?>

Bây giờ, nếu bạn mở tệp index.php trong trình duyệt của bạn và tải lên hình ảnh từ máy tính của bạn, nó sẽ được lưu trữ tại Storage \ user1 \ Images và tên tệp được viết trong Storage \ user1 \ Image

Trong trường hợp này, khi trang được tải và tệp Image_Name.Text có tên hình ảnh, thì máy chủ sẽ hiển thị hình ảnh đó, nếu không, hình ảnh giữ chỗ sẽ được hiển thị. Mã sau đây chỉ là làm điều này.

Mở tệp index.php và thay thế mã phần hiển thị hình ảnh bằng tệp này

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.
0

Bước 4: Tải hình ảnh từ URL lên máy chủ

Để tải lên hình ảnh từ URL bên ngoài, bạn nên đặt tùy chọn 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
9. Máy chủ proxy là cần thiết để đọc hình ảnh được chèn bởi URL và tải chúng lên máy chủ của bạn. Để kiểm tra, bạn có thể:
Proxy server is needed for reading images inserted by URL and uploading them to your server. For testing, you can:

  • Đặt tùy chọn ImageCorsProxy thành 'https://cors-erwhere.herokuapp.com'
  • Mở liên kết https://cors-anywhere.herokuapp.com/corsdemo trên một trang mới
  • Nhấp vào nút "Yêu cầu truy cập tạm thời vào máy chủ demo"

Thông báo hiện tại bạn hiện có quyền truy cập tạm thời vào máy chủ demo. sẽ xuất hiện và nếu bạn trở lại biểu mẫu tải lên của mình, bạn sẽ có thể tải lên hình ảnh từ URLS

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.
1

Bước 5: Trình quản lý hình ảnh thiết lập

Với Froala, một người quản lý hình ảnh đã được tạo cho bạn. Bạn chỉ cần nói với Froala những hình ảnh nào để hiển thị. Để làm điều này, bạn phải đặt tùy chọn 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
0. Trình chỉnh sửa sẽ gửi yêu cầu HTTP đến ImageManagerloadURL và máy chủ sẽ phản hồi bằng một mảng các đối tượng hình ảnh.

Để thực hiện điều này, chúng tôi sẽ tạo một tệp PHP mới có tên Image_Manager.php

Hướng dẫn php profile picture upload and display - tải lên và hiển thị ảnh hồ sơ php

Đặt tùy chọn ImageManagerloadURL thành đường dẫn của tệp đó

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.
2

Trong tệp Image_Manager.php, bạn chỉ cần gọi hàm 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
1 và chuyển đường dẫn lưu trữ hình ảnh làm đối số đầu tiên. Froala SDK sẽ trả về một mảng các đối tượng hình ảnh được lưu trữ trong thư mục đó. Tất cả những gì bạn cần làm là trả lại mảng hình ảnh trở lại máy khách.

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.
3

Bây giờ nếu bạn nhấp vào nút Trình quản lý hình ảnh, bạn sẽ có thể xem hình ảnh của mình

Hướng dẫn php profile picture upload and display - tải lên và hiển thị ảnh hồ sơ php

  • Đặt tùy chọn 
    <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
    2 nếu bạn muốn gửi một loại yêu cầu HTTP khác thay vì 
    <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
    3.
  • Trình quản lý hình ảnh có thể hiển thị hình ảnh trong các danh mục là tốt. Kiểm tra danh sách tùy chọn ImageManager hoàn chỉnh để biết cách làm điều đó.

Khi bạn di chuột qua một hình ảnh bên trong trình quản lý hình ảnh, hai nút được hiển thị một nút là để thay thế hình ảnh cấu hình bằng hình ảnh đã chọn và hình kia là để xóa hình ảnh đã chọn.

Nút đầu tiên là để thay thế hình ảnh hồ sơ và nó hoạt động ở phía máy khách ra khỏi hộp. Nhưng trong bản demo của chúng tôi, chúng tôi phải cập nhật tệp Image_Name.txt khi hình ảnh được chọn được thay thế để giữ hình ảnh mới được chọn khi trang được tải lại.

Để làm điều này, chúng tôi cần gửi yêu cầu HTTP đến máy chủ khi hình ảnh được thay thế sẽ lưu trữ liên kết hình ảnh đã chọn tại tệp Image_Name.txt. Froala không có tùy chọn để thực hiện việc này, nhưng Froala có nhiều sự kiện có thể giúp thực hiện các yêu cầu tùy chỉnh.

Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng sự kiện Froala 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
4 để gửi yêu cầu HTTP đến máy chủ. Ở mã sau bên trong đối tượng tùy chọn của Froala khởi tạo mã

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.
4

Nó sẽ gửi yêu cầu HTTP đến tệp store_image_link.php mà chúng tôi sẽ tạo tại thư mục cơ sở dự án và nó sẽ chứa mã sau để nhận liên kết hình ảnh đã thay thế và lưu trữ bên trong tệp văn bản.

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.
5

Vì sự kiện 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
4 cũng được kích hoạt khi hình ảnh được tải lên với các tùy chọn tải lên khác, chúng tôi có thể xóa mã tệp tệp hình ảnh khỏi tệp tải lên.php. Nội dung của nó sẽ là:

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.
6

Chúng tôi hiện đang lưu trữ liên kết hình ảnh trực tiếp không phải là thuộc tính liên kết. Vì vậy, chúng ta cần đặt mã sau từ tệp index.php

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.
7

Với

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.
8

Hiển thị hình ảnh hồ sơ khi trang được tải lại bây giờ sẽ hoạt động chính xác ngay cả khi nó được thay thế bằng trình quản lý hình ảnh.

Bước 6: Xóa hình ảnh

Việc xóa hình ảnh được thực hiện bằng cách gửi yêu cầu HTTP đến máy chủ sẽ sử dụng SDK Froala để xóa hình ảnh và trả lại phản hồi thành công cho máy khách. Người dùng có thể xóa hình ảnh theo hai cách

6.1: Xóa hình ảnh khỏi menu bật lên hình ảnh:

Vì chúng tôi không có tùy chọn gửi yêu cầu xóa khi người dùng nhấp vào nút Xóa hình ảnh khỏi menu bật lên hình ảnh, chúng tôi sẽ sử dụng sự kiện 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
6 để gửi yêu cầu.

Nếu hình ảnh bị xóa thành công khỏi máy chủ, máy khách sẽ thay thế hình ảnh hiện tại bằng hình ảnh trình giữ chỗ và cảnh báo người dùng rằng hình ảnh bị xóa thành công.

Trong tham số tùy chọn khởi tạo Froala, thêm mã sau vào đối tượng sự kiện

<?php
include ('inc/header.inc.php');
if(isset($_FILES["profilePicture"]["tmp_name"]) && isset($_FILES["profilePicture"]["name"])) {
    $ext = pathinfo($_FILES['profilePicture']['name'], PATHINFO_EXTENSION);
    $name = $_SESSION['user_login'];
    $tmp_name = $_FILES["profilePicture"]["tmp_name"];
    if($ext == 'png' || $ext == 'jpg') {
         if (isset($tmp_name)) {
            if(!empty($tmp_name)) {
                $location = '../profielfotos/';
                $full_name = $name.'.'.$ext;
                if(move_uploaded_file($tmp_name, $location.$full_name)) {
                    echo 'Photo uploaded!';
                }
                Down here are just some else statements with error reports.
9

Nó sẽ gửi yêu cầu HTTP đến tệp Delete_image.php mà chúng tôi sẽ tạo tại thư mục cơ sở dự án và nó sẽ chứa mã sau để xóa hình ảnh khỏi máy chủ bằng cách gọi 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
7 và đặt liên kết hình ảnh làm đối số đầu tiên. Nó cũng sẽ xóa liên kết hình ảnh khỏi tệp Image_Name.txt.

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
0

6.2 Xóa hình ảnh khỏi Trình quản lý hình ảnh

Để xóa hình ảnh khỏi ImageManager, Froala cung cấp ba tùy chọn 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
8, 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
9 và 
      /** The Editor initialization code **/
     <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
       }
       });
   </script>
0. Chúng tôi sẽ sử dụng tùy chọn 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
8 để gửi yêu cầu HTTP đến máy chủ khi một hình ảnh bị xóa. Chúng tôi sẽ yêu cầu HTTP đến cùng một tệp DELETE_IMAGE.PHP mà chúng tôi đã sử dụng trong bước 6.1 để xóa hình ảnh đã chọn khỏi máy chủ. Vì ImageManager có nhiều hình ảnh, chúng ta cần kiểm tra xem hình ảnh sẽ bị xóa có phải là cùng một hình ảnh được sử dụng làm hình ảnh hồ sơ trước khi xóa liên kết hình ảnh khỏi tệp Image_Name.txt.

1. Đặt tùy chọn ImageManagerDeleteURL để xóa_image.php

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
1

2. Chỉnh sửa xóa_image.php để lấy liên kết hình ảnh cấu hình hoạt động và kiểm tra xem nó có giống như hình ảnh sẽ bị xóa liên kết không. Nếu nó được xóa liên kết hình ảnh khỏi tệp Image_Name.txt.

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
2

Lưu ý: Hình ảnh sẽ bị xóa liên kết sẽ có sẵn tại biến toàn cầu ____52. the image to be deleted link will be available at 

      /** The Editor initialization code **/
     <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
       }
       });
   </script>
2 global variable.

3. Cuối cùng, máy khách nên thay thế hình ảnh hồ sơ bằng hình ảnh trình giữ chỗ nếu hình ảnh bị xóa giống như hình ảnh hồ sơ. Để làm điều này, chúng tôi sẽ sử dụng sự kiện 

      /** The Editor initialization code **/
     <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
       }
       });
   </script>
3. Tham số đầu tiên của sự kiện này là phản hồi của máy chủ đối với yêu cầu được gửi bởi tùy chọn 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Froala used as image input</title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   </head>
   <body>
      <h2>Update Your Profile</h2>
      <!-- start example -->
      <div class="well" style="max-width: 400px;">
      <form action="/person.php" method="post">
         <div class="form-group">
            <label for=" ">Upload Photo
            <label>
               <figure>
                  <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
                  <figcaption>Click on the above image to edit or replace</figcaption>
               </figure>
         </div>
         <div class="form-group">
         <label for="firstname">First Name</label>
         <input class="form-control" type="text" name="firstname" placeholder="Enter your first name">
         </div>
         <div class="form-group">
            <label for="lastname">Last Name</label>
            <input class="form-control" type="text" name="lasttname" placeholder="Enter your last name">
         </div>
         <div>
            <div class="form-group">
               <label>Gender</label>
               <label class= "checkbox-inline">
               <input type="radio" name="gender id="male" value="male">
               </label>
               <label class="checkbox-inline">
               <input type="radio" name="gender" id="female" value="female">
               </label>
            </div>
            <input type="submit" class="btn btn-primary" value="submit">
      </form>
      </div>
      <!--end example-->
      <!--JS Script-->
      <script src="js/froala_editor.min.js"></script>
      <script src="js/plugins/image.min.js"></script>
      <script src="js/plugins/image_manager.min.js"></script>
      <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
            }
            });
      </script>
   </body>
</html>
8, đó là phản hồi chúng tôi trả về trong tập lệnh Delete_image.php.

Chỉnh sửa tệp DELETE_IMAGE.PHP để trả về phản hồi cho biết hình ảnh sẽ bị xóa có phải là hình ảnh cấu hình hay không.

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
3

Trong kiểm tra sự kiện 

      /** The Editor initialization code **/
     <script>
         const editor = new FroalaEditor('#logo',{
         pluginsEnabled: [ 'image', 'imageManager'],
         //image popup buttons
         imageEditButtons: ['imageReplace', 'imageRemove'],         
         //Buttons for the popup menu which appears on imageReplace button click
         imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
       }
       });
   </script>
3 nếu phản hồi có chỉ ra rằng hình ảnh sẽ bị xóa không phải là hình ảnh hồ sơ, nếu có, thay thế nó trên biểu mẫu bằng hình ảnh trình giữ chỗ.

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
4

Bước 7: Xác thực hình ảnh

7.1: Xác thực hình ảnh ở phía máy khách

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
5

Lưu ý: Ngay cả khi bạn đang sử dụng xác thực phía máy khách, xác thực phía máy chủ cũng được khuyến nghị.Even if you are using client-side validation, server-side validation is also recommended.

7.2: Xác thực hình ảnh ở phía máy chủ

Trong bước 3, chúng tôi đã sử dụng phương thức 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>
      Froala used as image input
      <title>
      <!-- Stylesheets-->
      <link rel="stylesheet" href="css/froala_editor.min.css">
      <link rel="stylesheet" href="css/plugins/image.min.css">
      <link rel="stylesheet" href="css/plugins/image_manager.min.css">
   </head>
   </body>
   <!-- HTML-->
   <div class="form-group">
      <label for=" ">Upload Photo<label>
      <figure>
         <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
         <figcaption>Click on the above image to edit or replace</figcaption>
      </figure>
   </div>
   <!--JS Script-->
   <script src="js/froala_editor.min.js"></script>
   <script src="js/plugins/image.min.js"></script> 
   <script src="js/plugins/image_manager.min.js"></script>
   <script>
      const editor = new FroalaEditor( '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        });
       
   </script>
   </body>
</html>
8 để tải hình ảnh lên máy chủ. Phương thức này chấp nhận tham số tùy chọn thứ 2 là mảng tùy chọn tải lên.

Mở rộng hình ảnh và xác thực loại mime hình ảnh có thể được thực hiện trên máy chủ bằng SDK Froala như được mô tả trong tài liệu tham khảo này.

Các loại xác nhận khác, ví dụ: Xác thực kích thước hình ảnh có thể được thực hiện bằng cách gán một hàm tùy chỉnh cho mảng xác thực trên mạng.

Trong bản demo của chúng tôi, chúng tôi sẽ cho phép tải lên 'JPEG', 'JPG' và hình ảnh 'PNG'. Để làm điều đó, chúng tôi sẽ chỉnh sửa tệp tải lên.php

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
6

Tải xuống mã đầy đủ hướng dẫn

Chúng tôi đến cuối hướng dẫn của chúng tôi. Bạn có thể tải xuống biểu mẫu mã đầy đủ GitHub và bắt đầu ngay lập tức. Nếu bạn thích hướng dẫn này, vui lòng đóng vai chính kho lưu trữ GitHub, điều này sẽ khuyến khích chúng tôi tạo ra nhiều hướng dẫn hơn.

Tuy nhiên, mã hướng dẫn của chúng tôi kết thúc ở đây, chúng tôi không bao gồm tất cả những gì Froala có khả năng giúp bạn. Một số điều chúng tôi đã trình bày trong mã đã tải xuống được thảo luận dưới đây.

Bước 8: Xử lý lỗi trong khi tải lên hình ảnh

Theo mặc định, Froala hiển thị thông báo lỗi khi lỗi xảy ra trong quá trình tải lên hình ảnh nhưng nếu bạn muốn tùy chỉnh cách hoặc những gì được hiển thị, bạn có thể sử dụng các sự kiện Image.Error và ImageManager.Error để làm như vậy.

Hướng dẫn php profile picture upload and display - tải lên và hiển thị ảnh hồ sơ php

Bước 9: Thay đổi kích thước hình ảnh

9.1: Thay đổi kích thước hình ảnh ở phía máy khách

Froala cho phép người dùng thay đổi kích thước hình ảnh hồ sơ trong khi họ đang xem nó trên trình duyệt, nhưng điều này không ảnh hưởng đến kích thước vật lý của hình ảnh. Trừ khi bạn sử dụng các sự kiện Froala hoặc các cách khác để gửi kích thước hình ảnh đến máy chủ, hình ảnh sẽ trở về kích thước ban đầu của nó sau khi bạn tải lại trang.

9.2: Thay đổi kích thước hình ảnh ở phía máy chủ

Froala SDK sẽ giúp bạn tự động thay đổi kích thước hình ảnh được tải lên thành một kích thước nhất định. Thực hiện theo tài liệu tham khảo này. để đạt được điều đó.

Lưu ý: Đảm bảo rằng tiện ích mở rộng PHP Imagick được bật trên máy chủ của bạn hoặc lỗi sẽ được ném. Make sure that PHP Imagick extension is enabled on your server or an error will be will thrown.

Bước 10: Tải hình ảnh lên S3

Froala SDK cung cấp các phương pháp khác nhau để xử lý việc tải lên hình ảnh lên S3, điều này sẽ dựa trên tích hợp sản phẩm của bạn với S3 nhanh và dễ dàng. Tải hình ảnh lên S3 nằm ngoài phạm vi của hướng dẫn này, nhưng bạn có thể sử dụng tài liệu tham khảo này để hướng dẫn bạn thực hiện điều này.

Bước 11: Cho phép người dùng thêm mô tả hồ sơ nội dung phong phú

Nó phổ biến để có một trường khu vực văn bản để cho phép người dùng nhập mô tả về hồ sơ của họ. Sử dụng Froala Wysiwyg Editor, bạn có thể cho phép người dùng của mình cải thiện nội dung mô tả của họ bằng cách cho phép họ tạo kiểu và định dạng nội dung của họ, hơn nữa, người dùng của bạn sẽ có thể thêm video, hình ảnh, bảng và liên kết để có được bố cục và mô tả hồ sơ tốt hơn. Tất cả điều này có thể đạt được với cùng một tập lệnh froala mà chúng tôi đã sử dụng để tải lên hình ảnh, điều đó có nghĩa là không có thêm thư viện hoặc tài nguyên để chăm sóc. Và thật dễ dàng để được thêm vào biểu mẫu của bạn.

1. Thêm trường Textarea bình thường

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
7

2. Khởi tạo một trình soạn thảo mới trên đó.

<?php if ($handle = opendir('profielfotos/')) {
    $file = mysql_real_escape_string($_GET['u']);
    echo 'profielfotos/'.$file.'.png'; 
}
closedir($handle);
8

Hướng dẫn php profile picture upload and display - tải lên và hiển thị ảnh hồ sơ php

Làm cách nào để tải lên hồ sơ PHP của mình?

Tạo biểu mẫu HTML..
.
.
.
Chọn hình ảnh để tải lên:.
.
.
.
.

Chọn hình ảnh để tải lên:.

Làm thế nào tôi có thể xem hình ảnh đã tải lên trong PHP? $image; echo ' $img>'; } } } else { echo "Invalid file"; } ?>

Làm cách nào để thay đổi ảnh hồ sơ trong PHP?

Trong bảng người dùng của bạn trong DB cho trường userpic. Vòng giá trị mặc định cho mặc định.png để khi bản ghi người dùng mới được thêm vào, trường sẽ chứa hình ảnh mặc định.Rất quan trọng bất cứ nơi nào bạn đang kết nối đầu vào vào SQL của bạn, thay đổi để sử dụng một câu lệnh đã chuẩn bị. Set the default value to default. png so that when a new user record is added that field will contain the default image. Very Important Anywhere you are concatenating input into your SQL, change to use a prepared statement.

Làm thế nào để bạn chèn hình ảnh vào MySQL và hiển thị chúng bằng PHP?

Lưu trữ tệp hình ảnh trong cơ sở dữ liệu (Tải lên ...
Kiểm tra xem người dùng chọn tệp hình ảnh để tải lên ..
Truy xuất nội dung của tệp hình ảnh bằng TMP_NAME bằng cách sử dụng hàm PHP File_Get_Contents () ..
Chèn nội dung nhị phân của hình ảnh vào cơ sở dữ liệu bằng PHP và MySQL ..
Hiển thị trạng thái tải lên hình ảnh lên người dùng ..

programming php

Bài Viết Liên Quan

Lập trình raspberry pi với linux
Lập trình raspberry pi với linux

Hướng dẫn hangman game python github - trò chơi treo cổ python github
Hướng dẫn hangman game python github - trò chơi treo cổ python github

Hướng dẫn print html tag in php - in thẻ html trong php
Hướng dẫn print html tag in php - in thẻ html trong php

Điểm sàn đại học y phạm ngọc thạch 2023
Điểm sàn đại học y phạm ngọc thạch 2023

Hướng dẫn export database phpmyadmin - xuất cơ sở dữ liệu phpmyadmin
Hướng dẫn export database phpmyadmin - xuất cơ sở dữ liệu phpmyadmin

Hướng dẫn tile jumping program in python true or false - chương trình nhảy ô trong python true hoặc false
Hướng dẫn tile jumping program in python true or false - chương trình nhảy ô trong python true hoặc false

Hướng dẫn rotate image 90 degrees python - xoay hình ảnh 90 độ python
Hướng dẫn rotate image 90 degrees python - xoay hình ảnh 90 độ python

Hướng dẫn what is \ x00 in python? - \ x00 trong python là gì?
Hướng dẫn what is \ x00 in python? - \ x00 trong python là gì?

Hướng dẫn how do i rotate an image 180 degrees in python? - làm cách nào để xoay một hình ảnh 180 độ trong python?
Hướng dẫn how do i rotate an image 180 degrees in python? - làm cách nào để xoay một hình ảnh 180 độ trong python?

Hướng dẫn mysql count(if) - số lượng mysql (nếu)
Hướng dẫn mysql count(if) - số lượng mysql (nếu)

MỚI CẬP NHẬP

Định hướng nghề nghiệp sau khi học ngành kế toán năm 2024
3 phúts trước . bởi SensoryTavern
Lễ hội văn hóa tại trường học nhật bản năm 2024
19 phúts trước . bởi ConsultingInstruction
Quà tặng cho doanh nghiệp có phải xuất hóa đơn năm 2024
36 phúts trước . bởi UnrelatedDriver
Trung tâm sửa xe tải bình chánh tphcm năm 2024
1 giờs trước . bởi DrivenClothing
Hóa học 11 phân bón hóa học violet năm 2024
1 giờs trước . bởi ImmenseFeedback
Giải bài tập vật lý lớp 10 bài 6 năm 2024
1 giờs trước . bởi SloppyActress
Lỗi nvidia geforce game ready driver update is available năm 2024
2 giờs trước . bởi GlumLayout
Lịch cắt điện thành phố thanh hóa tháng 9 2023 năm 2024
2 giờs trước . bởi AgileGenitals
Various artists love songs top 100 flac torrent năm 2024
3 giờs trước . bởi HairlessAssociation
Top những dòng xe cào cào tại việt nam năm 2024
3 giờs trước . bởi NumericalCanonization

Xem Nhiều

Top ngân hàng cho vay lãi suất thấp 2023 năm 2024
2 ngàys trước . bởi OngoingEmbroidery
Ai là người ảnh hưởng đến văn hóa canada năm 2024
6 ngàys trước . bởi AdvancedDistributor
Khái quát văn học việt nam từ đầu tk 20 năm 2024
5 ngàys trước . bởi QuarterlyVogue
Sữa rửa mặt nào dùng cho bà bầu năm 2024
23 giờs trước . bởi GenerativeCreator
Quà tặng cho doanh nghiệp có phải xuất hóa đơn năm 2024
36 phúts trước . bởi UnrelatedDriver
Soạn văn thuyết minh về một danh lam thắng cảnh năm 2024
1 tuầns trước . bởi ChasteSending
Các đề thi học kì 1 lớp 11 môn văn năm 2024
5 ngàys trước . bởi SicklyAbsence
Giải bài tập tiếng anh 10 thí điểm unit 9 năm 2024
4 ngàys trước . bởi TribalHousing
Bài tập lý thuyết hóa ancol phenol 11 năm 2024
4 ngàys trước . bởi InternalBrunch
Lỗi sạc pin trên android 7.0 nougat sạc pin 97 năm 2024
14 giờs trước . bởi StreamlinedClutches

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.