Bootstrap tải lên nhiều hình ảnh với bản xem trước

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. -

1. Tạo một tệp HTML và xác định đánh dấu và viết kịch bản
2. 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

Làm cách nào để tải lên và hiển thị nhiều hình ảnh? . Trước khi chúng tôi bắt đầu, tôi muốn làm rõ rằng chúng tôi sẽ chỉ tải lên các hình ảnh trên giao diện người dùng chứ không phải phần phụ trợ (còn được gọi là…

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách xây dựng một ví dụ Tải lên nhiều hình ảnh Angular 14 với Bản xem trước bằng cách sử dụng Bootstrap, Tệp nhiều phần, FormData và Thanh tiến trình

Để biết thêm chi tiết, vui lòng truy cập

Tải lên nhiều hình ảnh góc 14 với Bản xem trước

Máy chủ API còn lại cho Máy khách góc này

Ví dụ API phần còn lại tải lên tệp Node Express

Ví dụ về Tải lên tệp Node Express với Google Cloud Storage

Ví dụ tải tệp Node Express lên MongoDB

Ví dụ tải lên tệp nhiều phần khởi động mùa xuân (vào thư mục tĩnh)

Ví dụ tải lên tệp nhiều phần khởi động mùa xuân (lên cơ sở dữ liệu)

thực hành nhiều hơn

Kho lưu trữ căn cứ hỏa lực góc 14. Ví dụ về Tải lên/Hiển thị/Xóa tệp

Ví dụ ứng dụng CRUD góc 14 với API Web

Ví dụ phân trang góc 14. phân trang ngx

Angular 14 Xác thực & ủy quyền JWT với API Web

Ví dụ xác thực biểu mẫu góc 14 (Biểu mẫu phản ứng)

Fullstack với Node

Ví dụ về góc 14 + Node Express + MySQL

Ví dụ về góc 14 + Node Express + PostgreSQL

Ví dụ về góc 14 + Node Express + MongoDB

Góc 14 + Nút Express. Ví dụ tải tệp lên

Fullstack với Spring Boot

Ví dụ về Cơ sở dữ liệu nhúng Angular 14 + Spring Boot + H2

Ví dụ về góc 14 + Spring Boot + MySQL

Ví dụ về góc 14 + Spring Boot + PostgreSQL

Ví dụ về Angular 14 + Spring Boot + MongoDB

Góc 14 + Khởi động mùa xuân. Ví dụ tải tệp lên

Fullstack với Django

Ví dụ về góc + Django

Góc + Django + MySQL

Góc + Django + PostgreSQL

Không có máy chủ với Firebase

Góc 14 Firebase CRUD với Cơ sở dữ liệu thời gian thực

Ví dụ CRUD góc 14 Firestore

Kho lưu trữ căn cứ hỏa lực góc 14. Ví dụ về Tải lên/Hiển thị/Xóa tệp

Tích hợp (chạy phụ trợ và giao diện người dùng trên cùng một máy chủ/cổng)

Cách tích hợp Angular với Node Restful Services

Cách tích hợp Angular với Spring Boot Rest API

máy chủ phát triển

Chạy ng serve --port 8081 cho máy chủ nhà phát triển. Điều hướng đến http://localhost:8081/. Ứng dụng sẽ tự động tải lại nếu bạn thay đổi bất kỳ tệp nguồn nào

giàn giáo mã

Chạy ng generate component component-name để tạo thành phần mới. Bạn cũng có thể sử dụng ng generate directive|pipe|service|class|guard|interface|enum|module

Xây dựng

Chạy ng build để xây dựng dự án. Các tạo phẩm xây dựng sẽ được lưu trữ trong thư mục dist/

Chạy thử nghiệm đơn vị

Chạy ng test để thực hiện các bài kiểm tra đơn vị thông qua Karma

Chạy thử nghiệm từ đầu đến cuối

Chạy ng e2e để thực hiện các bài kiểm tra từ đầu đến cuối thông qua nền tảng bạn chọn. Để sử dụng lệnh này, trước tiên bạn cần thêm một gói triển khai các khả năng kiểm tra từ đầu đến cuối

Giúp đỡ thêm

Để nhận thêm trợ giúp về Angular CLI, hãy sử dụng ng help hoặc xem trang Tham khảo lệnh và tổng quan về CLI góc