Tôi dường như không thể nói hết những điều thú vị mà bạn có thể làm với công nghệ web. Hôm nay mình sẽ hướng dẫn các bạn upload file qua AJAX Show
Trước tiên, chúng ta sẽ xem cách tải tệp lên bằng vanilla JavaScript. Và sau này, tôi sẽ chỉ cho bạn cách sử dụng thư viện DropzoneJS để triển khai tải tệp lên bằng cách kéo và thả Tìm kiếm một giải pháp nhanh chóng?Nếu bạn đang tìm kiếm một giải pháp nhanh chóng, thì có một bộ sưu tập tuyệt vời các ứng dụng và tập lệnh tải tệp lên tại CodeCanyon Cách tải tệp lên bằng Vanilla JavaScriptCó ba thành phần chính cho dự án của chúng tôi
Chúng tôi sử dụng thuộc tính 276 để cho phép người dùng chọn nhiều tệp để tải lên (tải lên nhiều tệp sẽ hoạt động bình thường ngay cả khi 279 không khả dụng). Như bạn sẽ thấy, 278 cho phép chúng tôi hiển thị cho người dùng hình thu nhỏ của các tệp họ đang tải lên (chúng tôi sẽ mong đợi hình ảnh) Đối với các trình duyệt cũ hơn không hỗ trợ 279 hoặc 278, hành vi tải lên sẽ quay trở lại tải lên tệp thông thường, không phải AJAX Ngoài cách đó ra, hãy viết mã Bước 1. Đánh dấu và tạo kiểuHãy bắt đầu với một số đánh dấu và tạo kiểu cơ bản. Tất nhiên, đây không phải là phần chính của hướng dẫn này—Tôi sẽ không đối xử với bạn như một người mới HTML1 <!DOCTYPE html>
2 <html lang="en"> 3 <head>
4 <meta charset="UTF-8" /> 5 <title>HTML5 File API</title> <!DOCTYPE html>
0<!DOCTYPE html>
1<!DOCTYPE html>
2<!DOCTYPE html>
3<!DOCTYPE html>
4<!DOCTYPE html>
5<!DOCTYPE html>
6<!DOCTYPE html>
7<!DOCTYPE html>
8<!DOCTYPE html>
920 21 22 23 24 25 26 27 28 29 <html lang="en">0 <html lang="en">1 <html lang="en">2 <html lang="en">3 <html lang="en">4 29 <html lang="en">6 <html lang="en">7 <html lang="en">8 <html lang="en">9 30 29 32 33 34 35 36 37 38 39 Khá cơ bản nhỉ? . php mà chúng ta sẽ xem xét trong giây lát và một phần tử đầu vào duy nhất, thuộc loại 286. Lưu ý rằng nó có thuộc tính boolean 276, cho phép người dùng chọn nhiều tệp cùng một lúc Đó thực sự là tất cả để xem ở đây. Tiếp tục nào CSS1 <head>
12 <head>
33 <head>
54 <head>
75 29 <!DOCTYPE html>
041 <!DOCTYPE html>
243 <!DOCTYPE html>
4<head>
7<!DOCTYPE html>
629 <!DOCTYPE html>
849 20 <meta charset="UTF-8" />1 22 <meta charset="UTF-8" />3 24 <meta charset="UTF-8" />5 26 <meta charset="UTF-8" />7 28 <meta charset="UTF-8" />9 <html lang="en">0 <head>
7<html lang="en">2 29 <html lang="en">4 55 <html lang="en">6 57 <html lang="en">8 59 30 <title>HTML5 File API</title>1 32 <head>
734 <title>HTML5 File API</title>5 36 <title>HTML5 File API</title>7 38 <meta charset="UTF-8" />9 <!DOCTYPE html>
00<!DOCTYPE html>
01<!DOCTYPE html>
02<!DOCTYPE html>
03<!DOCTYPE html>
04<!DOCTYPE html>
05 Không có gì gây sốc ở đây—chúng tôi chỉ đang tạo một số kiểu dáng cơ bản cho biểu mẫu tải lên của mình Bước 2. PHPChúng tôi cũng cần có khả năng xử lý các tệp tải lên ở mặt sau, vì vậy hãy đề cập đến vấn đề tiếp theo tải lên. php1 <!DOCTYPE html>
19_______0_______29 3___ <!DOCTYPE html>
23_______16__________<!DOCTYPE html>
25511_______27 <!DOCTYPE html>
0<!DOCTYPE html>
29<!DOCTYPE html>
2<!DOCTYPE html>
31<!DOCTYPE html>
4<!DOCTYPE html>
33__<!DOCTYPE html>
6_______0_______9_______8_______8_______11Hãy nhớ rằng đây là những dòng PHP đầu tiên mà tôi đã viết dễ dàng trong vòng một năm. Có lẽ bạn nên làm nhiều hơn một chút để bảo mật; . Nếu đúng như vậy, chúng tôi sẽ sử dụng 288 tích hợp sẵn để di chuyển nó vào một thư mục 289. Đừng quên đảm bảo rằng thư mục có thể ghi được Vì vậy, ngay bây giờ, chúng ta nên có một biểu mẫu tải lên đang hoạt động. Bạn chọn một hình ảnh (nhiều hình ảnh, nếu bạn muốn và trình duyệt của bạn cho phép bạn), nhấp vào Tải tệp lên. và bạn nhận được thông báo Hình ảnh được tải lên thành công Đây là những gì dự án nhỏ của chúng tôi trông giống như cho đến nay Nhưng, thôi nào, đó là năm 2020. chúng tôi muốn nhiều hơn thế. Bạn sẽ nhận thấy rằng chúng tôi đã liên kết jQuery với một tải lên. tệp js. Hãy bẻ khóa mở ngay bây giờ Bước 3. JavaScriptHãy đi sâu vào mã JavaScript để tải tệp lên 1 <!DOCTYPE html>
39_______0_______<!DOCTYPE html>
413 <!DOCTYPE html>
43411_______45 5___ <!DOCTYPE html>
47<!DOCTYPE html>
0<!DOCTYPE html>
49<!DOCTYPE html>
2<!DOCTYPE html>
51<!DOCTYPE html>
4<!DOCTYPE html>
53<!DOCTYPE html>
6_______11_______55_<!DOCTYPE html>
05_______8Đây là những gì chúng ta bắt đầu với. Chúng tôi tạo hai biến. 277 là phần tử đầu vào tệp của chúng tôi và 291 sẽ được sử dụng để gửi hình ảnh đến máy chủ nếu trình duyệt hỗ trợ điều đó. Chúng tôi khởi tạo nó thành 292 rồi kiểm tra xem trình duyệt có hỗ trợ 279. Nếu đúng như vậy, chúng ta sẽ tạo một đối tượng 279 mới. Ngoài ra, nếu chúng tôi có thể gửi hình ảnh bằng AJAX thì chúng tôi không cần Tải hình ảnh lên. nút, vì vậy chúng tôi có thể ẩn nó. Tại sao chúng ta không cần nó? Phần còn lại của JavaScript sẽ nằm bên trong chức năng tự gọi ẩn danh của bạn. Tiếp theo, chúng tôi tạo một chức năng trợ giúp nhỏ sẽ hiển thị hình ảnh sau khi trình duyệt có chúng 1 <!DOCTYPE html>
60_______0_______<!DOCTYPE html>
623 <!DOCTYPE html>
64411_______66 511_______68 <!DOCTYPE html>
0<!DOCTYPE html>
70<!DOCTYPE html>
2<!DOCTYPE html>
72<!DOCTYPE html>
4<head>
7Hàm nhận một tham số. nguồn hình ảnh (chúng ta sẽ xem cách chúng ta có được điều đó sớm). Sau đó, chúng tôi chỉ cần tìm danh sách trong đánh dấu của mình và tạo một mục danh sách và hình ảnh. Chúng tôi đặt nguồn hình ảnh thành nguồn chúng tôi nhận được, đặt hình ảnh vào mục danh sách và đặt mục danh sách vào danh sách. thì đấy Tiếp theo, chúng tôi phải thực sự chụp ảnh, hiển thị và tải chúng lên. Như chúng tôi đã nói, chúng tôi sẽ thực hiện việc này khi sự kiện 295 được kích hoạt trên phần tử đầu vào 1 <!DOCTYPE html>
762 <!DOCTYPE html>
783 <!DOCTYPE html>
804 <!DOCTYPE html>
455 <!DOCTYPE html>
84<!DOCTYPE html>
0<!DOCTYPE html>
45<!DOCTYPE html>
2<!DOCTYPE html>
88<!DOCTYPE html>
4<!DOCTYPE html>
90<!DOCTYPE html>
6<!DOCTYPE html>
55<!DOCTYPE html>
8<!DOCTYPE html>
9420 22 <!DOCTYPE html>
9724 <!DOCTYPE html>
9926 201 28 203 <html lang="en">0 <head>
7Vì vậy, chúng ta muốn làm gì khi người dùng đã chọn tệp? . Điều quan trọng duy nhất lúc này là 296. Các tệp mà người dùng đã chọn sẽ có thể truy cập được từ đối tượng 297. Ngay bây giờ, chúng tôi chỉ quan tâm đến thuộc tính 298, vì vậy chúng tôi có thể lặp lại các tệp. và đó chính xác là những gì chúng tôi sẽ làm tiếp theo. Trong vòng lặp của chúng tôi, chúng tôi đặt tệp hiện tại thành _______0_______86 để dễ truy cập. Điều tiếp theo chúng tôi làm là xác nhận rằng tệp là một hình ảnh. Chúng ta có thể làm điều này bằng cách so sánh thuộc tính <html lang="en">00 với một biểu thức chính quy. Chúng tôi đang tìm kiếm một loại bắt đầu bằng "hình ảnh" và theo sau là bất kỳ thứ gì. (Nút đúp ở phía trước chỉ chuyển đổi kết quả thành giá trị boolean. ) Vì vậy, chúng ta phải làm gì nếu có một hình ảnh trên tay? 1 207_______0_______ 209 3___ 211 40_______13 50_______15_______11_______0 217 <!DOCTYPE html>
2<head>
7<!DOCTYPE html>
4221 <!DOCTYPE html>
6223_______11_______8_______15_______7 Chúng tôi kiểm tra xem trình duyệt có hỗ trợ tạo đối tượng 278 hay không. Nếu có, chúng tôi sẽ tạo một Đây là cách chúng tôi sử dụng một đối tượng 278. Chúng ta sẽ chuyển đối tượng 286 của mình sang phương thức <html lang="en">04. Thao tác này tạo URL dữ liệu cho hình ảnh đã tải lên. Tuy nhiên, nó không hoạt động theo cách bạn mong đợi. URL dữ liệu không được trả lại từ chức năng. Thay vào đó, nó sẽ là một phần của đối tượng sự kiện Với ý nghĩ đó, chúng ta sẽ cần đăng ký một chức năng trong sự kiện <html lang="en">05. Hàm này lấy một đối tượng sự kiện, theo đó chúng tôi lấy URL dữ liệu. nó ở <html lang="en">06. Chúng ta sẽ chuyển URL dữ liệu này đến hàm <html lang="en">07 (mà chúng ta đã viết ở trên) Tiếp theo, chúng tôi kiểm tra đối tượng 291. Hãy nhớ rằng, nếu trình duyệt hỗ trợ 279, 291 sẽ là đối tượng _______0_______79; . Vì vậy, nếu chúng ta có một đối tượng 279, chúng ta sẽ gọi phương thức <html lang="en">14. Mục đích của một đối tượng 279 là để giữ các giá trị mà bạn đang gửi qua một biểu mẫu, vì vậy, phương thức _______13_______14 chỉ cần lấy một khóa và một giá trị. Trong trường hợp của chúng tôi, chìa khóa của chúng tôi là <html lang="en">17. Bằng cách thêm dấu ngoặc vuông vào cuối, chúng tôi đảm bảo rằng mỗi lần chúng tôi <html lang="en">14 một giá trị khác, chúng tôi thực sự đang thêm giá trị đó vào mảng đó, thay vì ghi đè thuộc tính <html lang="en">19 Chúng tôi sắp hoàn thành. Trong vòng lặp for của chúng tôi, chúng tôi đã hiển thị từng hình ảnh cho người dùng và thêm chúng vào đối tượng 291. Bây giờ, chúng ta chỉ cần tải lên các hình ảnh. Bên ngoài vòng lặp <html lang="en">21, đây là mảnh ghép cuối cùng của chúng ta 1 221 2 229 3 231 4 233 5 235 <!DOCTYPE html>
0237 <!DOCTYPE html>
2239 <!DOCTYPE html>
4241 <!DOCTYPE html>
6243 <!DOCTYPE html>
8<!DOCTYPE html>
9920 247 22 <head>
7Một lần nữa, chúng ta phải đảm bảo rằng chúng ta có 279 hỗ trợ; . nút sẽ hiển thị và đó là cách người dùng sẽ tải ảnh lên. Tuy nhiên, nếu chúng tôi có 279 hỗ trợ, chúng tôi sẽ lo việc tải lên qua AJAX. Chúng tôi đang sử dụng jQuery để xử lý tất cả những điều kỳ lạ của AJAX trên các trình duyệt Có thể bạn đã quen thuộc với phương thức <html lang="en">24 của jQuery. bạn truyền cho nó một đối tượng tùy chọn. Các thuộc tính <html lang="en">25, <html lang="en">00 và <html lang="en">27 phải rõ ràng. Thuộc tính <html lang="en">28 là đối tượng 291 của chúng ta. Lưu ý các thuộc tính <html lang="en">30 và <html lang="en">31 . Theo tài liệu của jQuery, <html lang="en">30 là <html lang="en">33 theo mặc định và sẽ xử lý cũng như chuyển đổi dữ liệu thành một chuỗi truy vấn. Chúng tôi không muốn làm điều đó, vì vậy chúng tôi đặt giá trị này thành 292. Chúng tôi cũng đang cài đặt <html lang="en">31 đến 292 để đảm bảo rằng dữ liệu đến được máy chủ như chúng tôi mong đợi Và đó là nó. Bây giờ, khi người dùng tải trang, họ sẽ thấy điều này Và sau khi họ chọn hình ảnh, họ sẽ thấy điều này Và những hình ảnh đã được tải lên Vì vậy, đó là cách bạn có thể tải tệp lên bằng cách sử dụng vanilla JavaScript. Trong phần tiếp theo, chúng ta sẽ xem cách triển khai tải lên tệp bằng thư viện DropzoneJS Cách sử dụng Thư viện DropzoneJSThư viện DropzoneJS là thư viện miễn phí phổ biến cho phép bạn triển khai tải tệp lên trong nháy mắt. Nó cũng hỗ trợ tải lên tệp kéo và thả cùng với tính năng xem trước đẹp mắt Hãy xem đoạn mã sau, thực hiện chức năng tải tệp lên với DropzoneJS 1 <!DOCTYPE html>
2 253 3 <head>
4 257 5 259 <!DOCTYPE html>
0<!DOCTYPE html>
3<!DOCTYPE html>
2<!DOCTYPE html>
5<!DOCTYPE html>
4265 <!DOCTYPE html>
6267 <!DOCTYPE html>
8269 20 271 22 27 24 37 Bạn sẽ phải tải dropzone xuống. js và dropzone. tệp css cục bộ trước Ngoài ra, bạn chỉ cần sử dụng lớp <html lang="en">37 trong thẻ biểu mẫu và thư viện DropzoneJS sẽ xử lý phần còn lại Hãy xem nó trông như thế nào khi bạn tải nó trong trình duyệt của mình Như bạn có thể thấy, có một phần cho phép bạn thả tệp vào đó. Ngoài ra, bạn cũng có thể chọn các tệp từ máy tính của mình bằng cách sử dụng hộp thoại chọn tệp mặc định. Hãy tiếp tục và thả một vài tệp hình ảnh vào đó và nó sẽ hiển thị cho bạn một bản xem trước đẹp mắt, như thể hiện trong ảnh chụp màn hình sau Điều đó không tuyệt vời sao, chỉ với một vài dòng mã? . Tôi khuyến khích bạn kiểm tra do thư viện này cung cấp Ngoài ra, còn có thư viện filepond, đây cũng là một thư viện tải tệp lên phổ biến mà bạn có thể sử dụng. Nó cung cấp các tính năng như kéo và thả, thanh tiến trình, xem trước và sắp xếp lại Đó là một bọcTải tệp lên qua AJAX khá thú vị và thật tuyệt khi các công nghệ mới này hỗ trợ điều đó mà không cần hack dài dòng Học JavaScript với một khóa học miễn phíNếu bạn muốn thành thạo JavaScript, hãy nhớ xem khóa học miễn phí của chúng tôi để tìm hiểu toàn bộ từ A-Z về nguyên tắc cơ bản của JavaScript hiện đại Trong khóa học này, bạn sẽ học tất cả các khái niệm cơ bản về ngôn ngữ JavaScript. Đúng rồi. Tất cả bọn họ. Bao gồm những cải tiến quan trọng nhất gần đây đối với ngôn ngữ, trong JavaScript ES6 (ECMAScript 2015) và JavaScript ES7 (ECMAScript 2016) Bạn sẽ bắt đầu với những nguyên tắc cơ bản của ngôn ngữ. biến và kiểu dữ liệu. Sau đó, trong mỗi bài học, bạn sẽ xây dựng kiến thức, từ cấu trúc dữ liệu như mảng và bản đồ đến vòng lặp, cấu trúc điều khiển và chức năng. Cùng với kiến thức cơ bản về ngôn ngữ, bạn cũng sẽ tìm hiểu một số API tích hợp chính để thao tác dữ liệu, AJAX và làm việc với trình duyệt web DOM. Cuối cùng, bạn sẽ xem qua một số API web mạnh mẽ và được sử dụng rộng rãi nhất được hỗ trợ bởi tất cả các trình duyệt hiện đại
Bài đăng này đã được cập nhật với sự đóng góp của Sajal Soni. Sajal là người Ấn Độ và anh ấy thích dành thời gian tạo các trang web dựa trên các khung mã nguồn mở Làm cách nào để tải video lên trong Ajax PHP?Quy trình của một tập lệnh tải lên tệp PHP hoàn chỉnh như sau. . Tạo biểu mẫu Tải lên HTML do Bootstrap hỗ trợ làm “giao diện người dùng” của tập lệnh Sử dụng jQuery & AJAX cho biểu mẫu tải tệp lên Áp dụng kiểm tra bảo mật Tạo các tập lệnh PHP để xử lý/xử lý dữ liệu Ajax có thể gửi tệp không?tệp html thông qua trình duyệt, máy khách sẽ có thể tải tệp lên máy chủ bằng Ajax và JavaScript thuần túy . Trình tải lên tệp JavaScript thuần túy đơn giản hóa các tương tác dựa trên Ajax với máy chủ.
Làm cách nào để gửi tệp đầu vào bằng Ajax?Gửi tệp đã chọn bằng cách sử dụng đối tượng FormData trong yêu cầu AJAX. . HTML. Create a CSS. Ẩn phần tử img. . PHP. Tạo một bản tải lên. . jQuery. Trên nút tải lên, nhấp vào lấy tệp đã chọn và tạo đối tượng FormData. . đầu ra. Xem đầu ra Phần kết luận Làm cách nào để gửi dữ liệu tệp và biểu mẫu bằng Ajax?Làm theo ba bước đơn giản sau. . Tạo biểu mẫu HTML. . mục lục. html. . Thêm thư viện JavaScript trên nền tảng đám mây. . Biểu mẫu HTML Trong thư mục gốc của bạn, hãy tạo một biểu mẫu HTML (một chỉ mục. html) bằng mã sau, chứa các trường để tải tệp lên. . Lưu ý những điều dưới đây. . Tập lệnh hỗ trợ AJAX trong JavaScript. . tập lệnh PHP |