JavaScript tải lên nhiều hình ảnh

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

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

    

        
        Name
    

    

        
        Description
    

    

        Photos
        

    

    Submit 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

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ử

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;
}
        

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

1. Tạo bố cục trang với kiểu CSS để chọn và hiển thị hình ảnh
2. 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
   1
3. Tạo một phần tử
   2 động cho mỗi tệp và thêm nó vào DOM

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ử

Đ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

Làm cách nào để tải lên nhiều hình ảnh bằng JavaScript?

Làm cách nào để hiển thị nhiều hình ảnh đã tải lên trong HTML bằng jQuery?

Làm cách nào để tải lên hình ảnh trong JavaScript?

Làm cách nào để tải lên hình ảnh trong thư mục bằng JavaScript?