Show
Xử lý hình ảnh hồ sơ người dùng bằng Froala và PHP - Hướng dẫnTrong 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ắt đầu 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: <!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> Bước 1: Hoàn thành mã HTML biểu mẫuTrong 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. Cấu trúc thư mục  Và mã index.php là <!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à nếu bạn mở tệp index.php trong trình duyệt của mình, bạn sẽ có thể thấy: Giải thích mã khởi tạo FroalaBước 2: Tải xuống SDK FROALA PHP /** 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 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ủFroalaEditor constructor function accepts three arguments:
Bước 6: Xóa hình ảnh
Tải xuống mã đầy đủ Bước 2: Tải xuống SDK FROALA PHPBướ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 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 /** 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>6 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ủ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
<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> 6.1: Xóa hình ảnh khỏi menu bật lên hình ảnh <?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); ?> 6.2: Xóa hình ảnh khỏi người tưởng tượng 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ước 7: Xác thực hình ảnh 7.1: Xác thực hình ảnh ở phía máy khách7.2: Xác thực hình ảnh ở phía máy chủ
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 <div class="form-group"> <label for=" ">Upload Photo</label> <figure> <?php $project_folder='/fro-demos/img'; $file_path=$_SERVER['DOCUMENT_ROOT'] . $project_folder . '/storage/user1/images/image_name.txt'; $response = file_get_contents($file_path); if($response === false || empty($response)){ $img_src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png"; } else { $response=json_decode($response); { $img_src=$response->link; } ?> <img id="logo" src="<?php echo $img_src; ?>" alt="User placeholder" height="100"> <figcaption>Click on the above image to edit or replace</figcaption> </figure> </div> 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 <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>0. 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:
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 <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' //Set Proxy to upload images from a URL imageCORSProxy:'https://cors-anywhere.herokuapp.com', }); </script> Bước 5: Trình quản lý hình ảnh thiết lậpVớ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 <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>1. 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 Đặt tùy chọn ImageManagerloadURL thành đường dẫn của tệp đó <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' //Set Proxy to upload images from a URL imageCORSProxy:'https://cors-anywhere.herokuapp.com', //Set the image delete URL. imageManagerDeleteURL:'delete_image.php', //Set the image upload URL. imageManagerLoadURL: 'image_manager.php', }); </script> Trong tệp Image_Manager.php, bạn chỉ cần gọi hàm <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>2 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. <!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 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
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 <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>5 để 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ã <!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 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. <!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 Vì sự kiện <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>5 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à: <!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 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 <!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 Vớ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>5 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 ảnhViệ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 <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>7 để 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 <!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 Nó sẽ gửi một 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 <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>8 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. <!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 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 <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>9, <?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); ?>0 và <?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); ?>1. Chúng tôi sẽ sử dụng tùy chọn <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>9 để 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 <!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 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. <!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 Lưu ý: Hình ảnh được xóa liên kết sẽ có sẵn tại biến toàn cầu <?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); ?>3 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 <?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); ?>4. 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 <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>9, đó 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. /** 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 Trong kiểm tra sự kiệ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); ?>4 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ỗ. /** 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>1 Bước 7: Xác thực hình ảnh7.1: Xác thực hình ảnh ở phía máy khách/** 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 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 /** 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>9 để 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 /** 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 Tải xuống mã đầy đủ hướng dẫnChú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 ảnhTheo 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. Bước 9: Thay đổi kích thước hình ảnh9.1: Thay đổi kích thước hình ảnh ở phía máy kháchFroala 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 S3Froala 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 /** 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>4 2. Khởi tạo một trình soạn thảo mới trê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>5 Làm thế nào để cập nhật hình ảnh hồ sơ người dùng trong PHP?Bạn sẽ cần chọn giá trị SRC hình ảnh từ DB và thêm nó vào thẻ đó.Trong đó: Người dùng là ID người dùng hiện đã đăng nhập.select the image src value from the DB and add it to that tag. Where :user is the currently logged in users ID.
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 .. |
