ĐỂ LẠI MỘT TRẢ LỜI
Nhận xét
Vui lòng nhập nhận xét của bạn
Tên. *
Vui lòng nhập tên của bạn vào đây
E-mail. *
Bạn đã nhập sai địa chỉ email
Vui lòng nhập địa chỉ email của bạn vào đây
Trang mạng
Lưu tên, email và trang web của tôi trong trình duyệt này cho lần bình luận tiếp theo
Vui lòng nhập câu trả lời bằng chữ số
ba × hai =
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tải lên nhiều hình ảnh với tính năng xem trước hình ảnh bằng jQuery Ajax và PHP. Chúng tôi sử dụng jQuery và giúp tải hình ảnh lên máy chủ
Bạn cũng có thể thích hình ảnh tải lên mà không cần làm mới trang bằng ajax và PHP
Tham gia với hơn 27.000 thành viên trong nhóm Google của bạn và nhận các hướng dẫn mới nhất
Nhận các hướng dẫn mới nhất của chúng tôi, Hướng dẫn cách thực hiện về phát triển web mỗi ngày ngay trong hộp thư đến của bạn
HÃY XEM THỬ HƯỚNG DẪN TRỰC TIẾP NÀY →
Để tải lên nhiều hình ảnh với tính năng xem trước hình ảnh, chỉ cần hai bước. -
- Tạo một tệp HTML và xác định đánh dấu và viết kịch bản
- Tạo một tệp PHP để tải lên hình ảnh
Bước 1. Tạo một tệp HTML và xác định đánh dấu và viết kịch bản
Chúng tôi tạo một tệp HTML và lưu nó với tên tải lên. html
Trong bước này, chúng tôi tạo một biểu mẫu để tải lên và xem trước nhiều hình ảnh, sau đó chúng tôi tạo một thẻ tệp và thêm 'nhiều', nó cho phép chọn nhiều hình ảnh và đính kèm sự kiện onchange để gọi hàm preview_image() để xem trước tất cả các hình ảnh sau khi người dùng chọn hình ảnh
Chúng tôi bao gồm Plugin jQuery và jQuery Form để tải lên hình ảnh sau đó chúng tôi sử dụng tài liệu. chức năng sẵn sàng gọi ajaxForm để bất cứ khi nào người dùng nhấp vào nút gửi, tất cả các hình ảnh sẽ được tải lên máy chủ và sau đó cảnh báo người dùng về 'Tải lên thành công'
Bạn cũng có thể kéo và thả hình ảnh tải lên bằng jQuery và PHP
Trong hàm preview_image() trước tiên chúng ta lấy bao nhiêu hình ảnh được chọn sau đó chúng ta sử dụng vòng lặp for để xem trước từng hình ảnh một bằng cách sử dụng hàm createObjectURL của javascript
Bước 2. Tạo một tệp PHP để tải lên hình ảnh
Chúng tôi tạo một tệp PHP và lưu nó với tên upload_file. php
Trong bước này, chúng ta sử dụng vòng lặp for để tải lên tất cả các hình ảnh trong thư mục hình ảnh bằng hàm move_uploaded_file()
Bạn cũng có thể thích tải lên hình ảnh từ url bằng PHP
Đó là tất cả, đây là cách tải lên nhiều hình ảnh với bản xem trước hình ảnh bằng jQuery, Ajax và PHP
Bạn có thể tùy chỉnh thêm mã này theo yêu cầu của bạn. Và xin vui lòng cho nhận xét về hướng dẫn này
Trong bài viết này, tôi sẽ chỉ cho bạn cách tạo một thiết kế xem trước và tải lên hình ảnh tùy chỉnh. Xem trước hình ảnh là một hệ thống tuyệt vời nơi bạn có thể kiểm tra trước khi tải lên một hình ảnh xem hình ảnh đó có đủ điều kiện để tải lên hay không
Đây là một hệ thống rất đơn giản mà bạn chỉ có thể tạo với sự trợ giúp của HTML và javascript. Nhưng ở đây tôi đã sử dụng một lượng nhỏ CSS để thiết kế nó
✅ Xem bản xem trước trực tiếp 👉👉 Tải lên hình ảnh với bản xem trước
HTML có nhiều loại chức năng nhập liệu, một trong số đó là văn bản, mật khẩu, email, v.v. mà chúng tôi luôn luôn sử dụng. Ngoài ra còn có một loại đầu vào khác được gọi là đầu vào tệp (<input type=" file">). Tại đây bạn có thể sử dụng bất kỳ loại tệp nào để nhập liệu
Điều này tương tự như thiết kế đầu vào chung. Chỉ 'Tệp' sẽ được sử dụng thay vì 'Mật khẩu' hoặc 'Email'. Nó sẽ nhận tệp từ thiết bị của bạn và sau đó hiển thị dưới dạng bản xem trước. Tuy nhiên, để thực hiện việc xem trước hình ảnh này, bạn phải nhờ sự trợ giúp của JavaScript hoặc JQuery. Ở đây tôi đã tạo thiết kế tải lên và xem trước hình ảnh này bằng Pure JavaScript
Xem trước hình ảnh trước khi tải lên
Bây giờ là lúc để hiểu đầy đủ cách nó được tạo ra. Trước khi bắt đầu hướng dẫn, hãy để tôi nói với bạn một số điểm quan trọng. Đầu tiên tôi thiết kế trang web bằng một số CSS. Sau đó, tôi đã tạo một hộp trên trang web. Tôi đã tạo một nút nhỏ bằng cách sử dụng đầu vào trong hộp đó
Tôi đã sử dụng một cấp độ để tạo nút này ở đây. Với điều này, tôi đã tạo một màn hình nhỏ để xem trước hình ảnh. Tôi đã triển khai nó bằng JavaScript ở phần cuối của tất cả. Cùng tham khảo cách làm đầy đủ các bước bên dưới nhé
Bước 1. Thiết kế trang web bằng CSS
Đầu tiên tôi thiết kế trang web bằng mã CSS. Ở đây chúng tôi đã đặt màu nền của trang web là màu xanh lam và chiều cao là 100vh
body { margin:0px; height:100vh; background: #1283da; }
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bước 2. Tạo cấu trúc cơ bản của bản xem trước hình ảnh
Bây giờ tôi đã tạo một hộp nhỏ trên trang web bằng một số HTML và CSS cơ bản. Như bạn có thể thấy ở trên, các nút và xem trước hình ảnh đều nằm trong hộp này
Chiều rộng của hộp là 350 px và màu nền là màu trắng. Tôi đã sử dụng một số bóng hộp ở đây để làm cho nó sáng hơn và hấp dẫn hơn
<div class="center"> <div class="form-input"> </div> </div>
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
.center { height:100%; display:flex; align-items:center; justify-content:center; } .form-input { width:350px; padding:20px; background:#fff; box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377), 3px 3px 7px rgba(94, 104, 121, 0.377); }
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bước 3. Tạo một nơi để xem trước hình ảnh
Tôi đã tạo một màn hình nhỏ để xem hình ảnh xem trước. Mặc dù nó không thể được nhìn thấy trong điều kiện bình thường. Điều này chỉ có thể được nhìn thấy khi chúng tôi triển khai nó với sự trợ giúp của JavaScript
<div class="preview"> <img id="file-ip-1-preview"> </div>
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
.form-input img { width:100%; display:none; margin-bottom:30px; }
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bước 4. Tạo các hộp và nút đầu vào
Bây giờ tôi đã tạo một hộp nhập liệu bằng cách nhập tệp và tạo một nút ở đó. Tôi đã sử dụng mức đầu vào để tạo nút này. Sau đó, bằng cách sử dụng CSS, tôi đã tạo cho cấp độ đó hình dạng của một nút. Chiều cao nút 45 px và width 45%
<label for="file-ip-1">Upload Image</label> <input type="file" id="file-ip-1" accept="image/*" onchange="showPreview(event);">
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
________số 8_______
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bước 5. Kích hoạt tải lên hình ảnh bằng mã JavaScript
Như bạn có thể thấy ở trên, chúng tôi đã thiết kế nó hoàn chỉnh. Bây giờ tôi sẽ triển khai hệ thống xem trước hình ảnh này với sự trợ giúp của JavaScript
function showPreview(event){ if(event.target.files.length > 0){ var src = URL.createObjectURL(event.target.files[0]); var preview = document.getElementById("file-ip-1-preview"); preview.src = src; preview.style.display = "block"; } }
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau khi sử dụng js, hình ảnh xem trước và tải lên sẽ có hiệu lực đầy đủ. Sau đó, khi bạn nhấp vào nút tải lên, bạn sẽ thấy bản xem trước của bất kỳ hình ảnh nào bạn chọn từ tệp của mình
Bài liên quan
- Thiết kế chân trang HTML CSS
- Tạo danh sách việc cần làm bằng JavaScript
- Đồng hồ bấm giờ đơn giản sử dụng JavaScript
- Máy tính tuổi Javascript
- Trình tạo mật khẩu ngẫu nhiên với JavaScript
- Thanh trượt hình ảnh tự động trong Html, CSS
- Menu thanh bên Sử dụng HTML CSS
Hy vọng rằng từ hướng dẫn ở trên, bạn đã học được cách tạo một hình ảnh tải lên với bản xem trước. Tôi đã tạo một hệ thống xem trước nhiều hình ảnh bằng JQuery