Trải nghiệm người dùng có thể được cải thiện đáng kể trên tính năng tải lên hình ảnh nếu chúng tôi cho phép người dùng xem trước hình ảnh họ đã chọn trước khi thực sự tải nó lên máy chủ bằng cách nhấp vào nút Tải lên.
Trong hướng dẫn này, chúng tôi sẽ tạo một biểu mẫu có hai đầu vào: hình ảnh hồ sơ của người dùng [hình ảnh] và sinh học [văn bản] của họ. Khi người dùng điền vào biểu mẫu và nhấp vào nút tải lên, chúng tôi sẽ sử dụng tập lệnh PHP của chúng tôi để lấy các giá trị biểu mẫu [hình ảnh và tiểu sử] và lưu hình ảnh trong thư mục dự án của chúng tôi có tên là hình ảnh. Khi hình ảnh được lưu trong thư mục dự án, chúng tôi sẽ lưu trữ một bản ghi trong cơ sở dữ liệu chứa tên hình ảnh và sinh học của người dùng.
Sau khi lưu thông tin này, chúng tôi sẽ tạo một trang khác để truy vấn hồ sơ người dùng & nbsp; từ cơ sở dữ liệu hiển thị chúng trên trang với mỗi sinh học của người dùng so với ảnh hồ sơ của họ. & Lt;/p & gt; & lt; div class = "trung tâm văn bản vuông" & gt; & lt; span id = "ezoic-pub-ad-lobleholder-102" & gt; & lt;/span & gt; & lt; span class = " 102 "data-ez-name =" codewithawa_com-box-4 "& gt; & lt; span id =" div-gpt-ad-codewithawa_com-box-4-0 "ezaw =" 580 "ezah =" 400 "style =" Vị trí: tương đối; z-index: 0; hiển thị: block inline; padding: 0; min-height: 90px; min-width: 728px "class =" ezoic-ad "& gt; & lt; "data-cfasync =" false "type =" text/javaScript "style =" display: none "& gt; if [typeof ez_ad_units! = 'không xác định'] {ez_ad_units.push [[[580,400] ',' ezslot_3 ', 102,' 0 ',' 0 ']]}; Vì vậy, hãy bắt đầu với việc thực hiện. Tạo một thư mục dự án và gọi nó là Image-Preview-Upload. Bên trong thư mục này, tạo một tệp có tên Form.php và một thư mục có tên là hình ảnh để lưu trữ hình ảnh. form.php: & lt;? php bao gồm_once ['processForm.php']? & gt; & lt;! DOCTYPE HTML & GT; & lt; html lang = "en" & gt; & lt; đầu & gt; & lt; Charset meta = "utf-8" & gt; & lt; meta name = "viewport" nội dung = "width = width-width, scal-scale = 1.0" & gt; & lt; meta http-equiv = "x-ua tương thích" content = "IE = edge" & gt; & lt; Tiêu đề & gt; Xem trước hình ảnh và tải lên php & lt;/title & gt; & lt;!-Bootstrap CSS-& gt; & lt; link rel = "styleSheet" href = "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css"/& gt; & lt; link rel = "styleSheet" href = "main.css" & gt; & lt;/head & gt; & lt; cơ thể & gt; & lt; div class = "container" & gt; & lt; div class = "hàng" & gt; & lt; div class = "col-4 offset-md-4 form-div" & gt; & lt; a href = "cruces.php" & gt; xem tất cả các hồ sơ & lt;/a & gt; & lt; form action = "form.php" meather = "post" exst & lt; h2 class = "văn bản trung tâm MB-3 MT-3" & gt; Cập nhật hồ sơ & lt;/h2 & gt; & lt;? & lt; div class = "alert & lt;? php echo $ msg_class? & gt;" vai trò = "cảnh báo" & gt; & lt;? Php echo $ msg; ? & gt; & lt;/div & gt; & lt;? PHP endif; ? & gt; & lt; div class = "-form-group text-center" style = "vị trí: tương đối;" & gt; & lt; span class = "img-div" & gt; & lt; div class = "center center img-placeholder" title = "triggerClick []" & gt; & lt; h4 & gt; cập nhật hình ảnh & lt;/h4 & gt; & lt;/div & gt; & lt; img src = "hình ảnh/avatar.jpg" title = "TriggerClick []" id = "profileDisplay" & gt; & lt;/span & gt; & lt; loại đầu vào = "file" name = "accordImage" onchange = "displayImage [this]" id = "ackineMage" class = "form-control" style = "display: none;" & gt; & lt; nhãn & gt; hình ảnh hồ sơ & lt;/nhãn & gt; & lt;/div & gt; & lt; div class = "nhóm mẫu" & gt; & lt; nhãn & gt; Bio & lt;/nhãn & gt; & lt; textarea name = "Bio" class = "form kiểm soát" & gt; & lt;/textarea & gt; & lt;/div & gt; & lt; div class = "nhóm mẫu" & gt; & lt; loại nút = "gửi" name = "save_profile" class = "btn btn-primary btn-block" & gt; lưu người dùng & lt;/nút & gt; & lt;/div & gt; & lt;/form & gt; & lt;/div & gt; & lt;/div & gt; & lt;/div & gt; & lt;/cơ thể & gt; & lt;/html & gt; & lt; script src = "scripts.js" & gt; & lt;/script & gt; Trước khi tôi nói bất cứ điều gì về biểu mẫu, trước hết chúng ta hãy tạo & nbsp; một tệp kiểu dáng có tên main.css cho biểu mẫu trong thư mục gốc của dự án của chúng tôi. main.css: .form-div {margin-top: 100px; Biên giới: 1px rắn #E0E0E0; } #ProfileDisplay {Display: Block; Chiều cao: 210px; Chiều rộng: 60%; Biên độ: 0px tự động; Biên giới-Radius: 50%; } .img-placeholder {chiều rộng: 60%; màu trắng; Chiều cao: 100%; Bối cảnh: Đen; Độ mờ: .7; Chiều cao: 210px; Biên giới-Radius: 50%; Z-Chỉ số: 2; Vị trí: Tuyệt đối; Trái: 50%; Biến đổi: Dịchx [-50%]; không trưng bày; } .img-placeholder h4 {margin-top: 40%; màu trắng; } .img-div: di chuột .img-placeholder {display: block; Con trỏ: Con trỏ; } Trên dòng đầu tiên của tệp form.php của chúng tôi, chúng tôi bao gồm một tệp chứa tập lệnh PHP của chúng tôi chịu trách nhiệm nhận các giá trị biểu mẫu và xử lý chúng [nghĩa là lưu hình ảnh trong thư mục hình ảnh và tạo bản ghi tương ứng trong người dùng bảng trong cơ sở dữ liệu]. [vitag.init = window.vitag.init || []].
Nếu bạn xem biểu mẫu, bạn sẽ thấy rằng chúng tôi đang đặt giá trị của hiển thị thuộc tính CSS thành không có; Chúng tôi đang làm điều này vì chúng tôi không muốn hiển thị phần tử đầu vào HTML mặc định để tải lên tệp. Thay vào đó, chúng tôi sẽ tạo ra một yếu tố khác và kiểu nó theo cách chúng tôi muốn và sau đó khi người dùng nhấp vào phần tử của chúng tôi, chúng tôi sẽ sử dụng JavaScript dưới mui xe để kích hoạt phần tử đầu vào tệp HTML được ẩn với chúng tôi.display to none; We are doing this because we don't want to display the default HTML input element for file upload. Instead, we will create a different element and style it the way we want and then when the user clicks on our element, we will use JavaScript under the hood to trigger the HTML file input element which is hidden to us.
Bây giờ chúng ta hãy thêm các tập lệnh chịu trách nhiệm kích hoạt phần tử đầu vào tệp và sau đó cũng hiển thị hình ảnh để xem trước.
Tạo một tệp được gọi là scripts.js trong gốc của ứng dụng của bạn và thêm mã này vào nó:
script.js::
function triggerClick[e] {
document.querySelector['#profileImage'].click[];
}
function displayImage[e] {
if [e.files[0]] {
var reader = new FileReader[];
reader.onload = function[e]{
document.querySelector['#profileDisplay'].setAttribute['src', e.target.result];
}
reader.readAsDataURL[e.files[0]];
}
}
Bây giờ khi người dùng nhấp vào vùng hình ảnh tròn, hàm TriggerClick [] sẽ kích hoạt sự kiện nhấp chuột trên phần tử đầu vào tệp ẩn. Khi người dùng chọn một hình ảnh, một sự kiện onchange được kích hoạt trên trường đầu vào tệp và chúng ta có thể sử dụng lớp filereader [] của JavaScript để hiển thị tạm thời hình ảnh để xem trước.triggerClick[] will trigger a click event on the hidden file input element. When the user selects an image, an onChange event is triggered on the file input field and we can use JavaScript's FileReader[] class to temporarily display the image for preview.
Khi người dùng nhấp vào nút 'Lưu người dùng', biểu mẫu đầu vào sẽ được gửi đến cùng một trang. Vì vậy, trên cùng một trang form.php, chúng tôi bao gồm một tệp processform.php chứa mã để xử lý biểu mẫu của chúng tôi.processForm.php file which contains the code to process our form.
Vì vậy, trong thư mục gốc của dự án, hãy tạo một tệp có tên ProcessForm.php;
processForm.php::