Khi nghe đến tiêu đề thì chắc hẳn các bạn không lạ lẫm gì với kỹ thuật AJAX trong Javascript rồi. Nếu như trước đây, các bạn từng biết cách làm sao đập phá cái AJAX trong việc gửi comment, load trang, thêm giỏ hàng..v...v...Và bây giờ các bạn sẽ được làm quen với Kỹ thuật AJAX với Upload và cách các bạn có thể Upload một lúc nhiều File cũng bằng chính kỹ thuật này.
Trong đó, các cấu trúc mà tôi đã tạo sẵn đã bao gồm thư viện Bootstrap vào trong đó. Bạn có thể tải Bootstrap tại
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.
và chép file bootstrap.min.css vào thư mục như cấu trúc của tôi bên trên.
Trong tệp tin tôi gửi đến mọi người này, tôi cũng đã customize CSS một số thứ và đã demo ngay khi các bạn mở file này lên.
Các thánh các bạn nên lưu ý những thứ sau trong file của tôi:
1. File Input sẽ có id là "myfile"
2. Để Upload nhiều file cùng lúc các bạn không quên đến thuộc tính Multiple trong File Input nhé.
3. Form có sự kiện onsubmit gửi tới hàm doUpload()
4. Button Cancle sẽ có sự kiện onclick gửi tới hàm cancleUpload()
5. Source JS tôi trỏ đến file function.js
6. Vùng div#progress-group do tôi tạo ra để khi chúng ta tải lên sẽ tạo ra thêm các vùng chứa các thanh tiến trình tại đây.
7. Cuối cùng là thẻ image tôi chèn ở đầu body, giúp cho việc chúng ta sử dụng AJAX được trơn tru hơn, bằng cách load file hình này vào trước để trình duyệt cache.
Rồi trong những tệp function.js của tôi sẽ sẽ biểu thị trên màn hình bằng các bước sau:
Các bạn nên lưu ý các vấn đề như sau:
1. Javascript phân biệt hoa thường (lỗi này gặp rất nhiều)
2. Biết cách sử dụng JSON và cách bẫy lỗi JSON
3. Sử dụng sự kiện event trả về trong addEventListener, các bạn cũng nên lưu ý đối số cuối cùng trong addEventListener nhé, bạn có thể tham khảo tại đây :
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.
4. Cuối cùng, tôi nghĩ là khi đến với bài viết này, các bạn cũng đã hiểu qua về Javascript và AJAX cũng ít nhiều rồi. Nếu chưa nắm rõ bạn có thể tham khảo lại 2 Video của thầy Kenny Huy tại đây:
1.
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.
2.
To view links or images in this forum your post count must be 10 or greater. You currently have 0 posts.
Tiếp tục, chúng ta sẽ đến với phần Server-side và ở đây chính là PHP. Các bạn hãy tạo ra file upload.php :