Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > Chọn và upload cùng lúc nhiều ảnh sử dụng Ajax
Chọn và upload cùng lúc nhiều ảnh sử dụng Ajax
Nguyễn Trung Hiếu
Share Code Web Company 2013

Chọn và upload cùng lúc nhiều ảnh sử dụng Ajax

Hôm nay sharecodeweb sẽ hướng dẫn các bạn thực hiện thủ thuật upload và chọn nhiều ảnh cùng lúc sử dụng Ajax và Jquery.

Giới thiệu

Nếu bạn nào đã từng sử dụng wordpress thì sẽ thấy cơ chế upload và select của phần media vào bài post ấy rất hay đúng không. Tư tưởng của bài viết này cũng giúp các bạn thực hiện được điều đó, giống như chúng ta sử dụng wordpress vậy.
Bài này cũng đã được sharecodeweb dịch từ 9lessions về cho các bạn học. Ngoài ra các bạn có thể tham khảo bài Multiple Ajax Image Upload mà không refesh lại trình duyệt.
Để dễ hình dung được chi tiết của bài viết này nhé.
Multi Ajax Image Upload
Về cơ bản, khi người dùng nhấn nút Open, cửa sổ mở file sẽ hiển thị để người dùng lựa chọn. Sau khi chọn xong những bức ảnh cần upload, chương trình sử dụng PHP và jQuery để xử lý tiếp.

Database

Đầu tiên là phải tạo một cơ sở dữ liệu để chúng ta có thể khai thác nó cái đã. DB làm nhiệm vụ lưu lại đường dẫn ảnh và những thứ liên quan

Bảng User

Bảng User Upload

Ajax

Nói tới cách sử dụng ajax thì tất nhiên phải có ajax rồi chứ nhỉ. Đoạn ajax của chúng ta như sau:

Đoạn ajax này rất đơn giản, chỉ xử lý sự kiện hiển thị/ẩn đi nút bấm upload và dòng trạng thái sau khi upload.

File Index.php

Tập tin này sẽ chứa một form, trong đó có một thẻ input cho phép user upload file.

File Ajax.php

Tập tin này có hàm getExtension dùng để lấy ra phần mở rộng của tập tin. Sau đó làm cơ sở để kiểm tra xem người dùng đã chọn đúng tập tin ảnh để upload hay không?

Ngoài ra cũng cần có file db.php kết nối tới cơ sở dữ liệu chứ nhỉ

Cuối cùng là CSS

Css lại cho đẹp, một chút xíu thôi. ai cần đẹp hơn thì cố gắng thể hiện trình style của mình nhé. Hoặc có thể tham khảo thiết kế form upload không refesh lại trình duyệt để css cho đẹp.

Download code upload nhiều ảnh cùng lúc

Ngoài ra các bạn cũng có thể download code bên dưới đây để học hỏi kỹ hơn nhé


Loạt bài viết về Upload ảnh bằng ajax

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}
%d bloggers like this: