Một plugin jQuery nhẹ cho phép bạn tạo nhiều hình ảnh tải lên với tính năng xem trước và xóa. Plugin hỗ trợ chức năng kéo và thả để tải lên nhiều hình ảnh. Nó sử dụng một biểu mẫu HTML tĩnh mà không sử dụng AJAX để giữ hình ảnh trước khi tải lên
Người dùng có thể kéo nhiều hình ảnh ở dạng HTML [tải lên] và xem hình thu nhỏ của hình ảnh trước khi tải lên. Hơn nữa, plugin có thể được tùy chỉnh hoàn toàn theo nhu cầu của bạn
[intro_ad]
Tổng quan và xem trước plugin
Cắm vào. image-uploader Tác giả. christianbayerThể loại. Văn bản và đầu vào đã xuất bản. Ngày 15 tháng 12 năm 2022Loại tệp. kho lưu trữ zip [HTML, CSS & JavaScript ]Kích thước gói. 13 KB phụ thuộc. jQuery3. 0 hoặc phiên bản mới nhất
Sửa đổi lần cuối. 30 tháng 12 năm 2022 @ 6. 06 giờ sáng
MIT
Ngã ba trên GitHub
24.110
Tải xuống bản demo Tải xuống kho lưu trữ chính
Chia sẻ cái này
- Tài liệu
- Tùy chọn cấu hình
- Nhật ký thay đổi
Cách sử dụng Trình tải lên nhiều hình ảnh với Xem trước và Xóa
1. Trước hết, hãy tải các phông chữ jQuery và Google Material Icons vào trang HTML của bạn để bắt đầu với plugin Image-Uploader
2. Sau đó, cũng bao gồm tệp CSS và JavaScript của Image-Uploader
3. Tạo một biểu mẫu HTML với thuộc tính
0 có chứa
1 cho tính năng tải lên hình ảnh đơn giản
3. 1 Về cơ bản, đây là cấu trúc HTML hoàn chỉnh để xem trước và xóa hình ảnh trước khi tải lên
NameDescriptionPhotosSubmit and display data
4. Cuối cùng, khởi tạo plugin trong chức năng sẵn sàng cho tài liệu jQuery để kích hoạt tải lên nhiều hình ảnh jQuery với tính năng xem trước và xóa
$[document].ready[function[]{ $['.input-images'].imageUploader[]; }];
Để sử dụng nâng cao hơn, vui lòng kiểm tra tab Tùy chọn cấu hình
Tùy chọn cấu hình nâng cao để tải lên nhiều hình ảnh với Xem trước và Xóa
Sau đây là một số tùy chọn cấu hình nâng cao để tạo/tùy chỉnh “tải lên nhiều hình ảnh có xem trước và xóa”
Nhận tất cả các tệp hình ảnh bằng JavaScript và lặp qua các tệp đó bằng câu lệnh
0. Chuyển đổi từng tệp thành một URL dữ liệu bằng cách gọi hàm xây dựng
1. Tạo phần tử
2 và sử dụng URL dữ liệu đó làm giá trị
3 của nó. Cuối cùng, thêm phần tử vào DOM
Chúng tôi có thể sử dụng các bước tương tự mà chúng tôi đã áp dụng để xem trước một hình ảnh bằng JavaScript trước khi tải nó lên máy chủ
Xem trước nhiều hình ảnh trước khi tải lên bằng JavaScript
Để chấp nhận các tệp có phần tử
4, bạn phải đặt
5 làm loại của nó. Nó sẽ cho phép một tệp tại một thời điểm. Nhưng mục tiêu của chúng tôi là chấp nhận nhiều tệp
Bạn cần sử dụng thuộc tính
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #fdfdfd;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 500px;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 15px;
background: #ffffff;
box-shadow: rgba[99, 99, 99, 0.2] 0px 2px 8px 0px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}
#select-image {
display: none;
}
label {
display: flex;
align-items: center;
background: #025bee;
padding: 18px 30px;
color: #ffffff;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
label svg {
fill: #ffffff;
width: 20px;
height: 20px;
margin-right: 8px;
}
.preview_image p {
text-align: center;
}
#images {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: space-between;
}
.image_box {
width: 45%;
}
img {
width: 100%;
}
.image_name {
display: block;
font-size: 14px;
text-align: center;
}
0 với phần tử 4. Điều này sẽ yêu cầu trình duyệt cho phép đồng thời nhiều tệp
Với điều này, người dùng có thể chọn bất kỳ loại tệp nào họ muốn. Bây giờ, tùy thuộc vào chúng tôi để xác thực loại tệp trong JavaScript để người dùng chỉ chọn hình ảnh
Có 3 bước đơn giản để xem trước nhiều hình ảnh bằng JavaScript
- Tạo bố cục trang với kiểu CSS để chọn và hiển thị hình ảnh
- Chuyển đổi tất cả các hình ảnh thành URL dữ liệu bằng cách sử dụng hàm xây dựng
- Tạo một phần tử
Hãy xem xét chi tiết từng bước với các ví dụ
Bước 1. Tạo bố cục trang web bằng HTML và CSS
Tôi đang tạo cấu trúc HTML với phần tử
4. Người dùng có thể chọn tệp hình ảnh bằng cách nhấp vào yếu tố này. Tôi cũng có một phần khác để hiển thị tổng số tệp đã chọn và xem trước những hình ảnh đó________số 8
Điều này sẽ không đẹp trong trình duyệt. Tôi sẽ thêm một số kiểu CSS vào nó. Bạn có thể sử dụng phong cách của riêng bạn nếu bạn muốn. Nếu không, hãy sao chép và dán đoạn mã sau