Làm cách nào để gửi video trong AJAX?

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

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

Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?

Cách tải tệp lên bằng Vanilla JavaScript

Có ba thành phần chính cho dự án của chúng tôi

  • thuộc tính
    2
    76 trên phần tử tệp 
    2
    77
  • đối tượng
    2
    78 từ API tệp mới
  • đối tượng
    2
    79 từ 
    2
    80

Chúng tôi sử dụng thuộc tính 

2
76 để 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 
2
79 không khả dụng). Như bạn sẽ thấy, 
2
78 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ợ 

2
79 hoặc 
2
78, 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ểu

Hã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

HTML

1
<!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>
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
<html lang="en">
0
<html lang="en">
1
<html lang="en">
2
<html lang="en">
3
<html lang="en">
4
2
9
<html lang="en">
6
<html lang="en">
7
<html lang="en">
8
<html lang="en">
9
3
0
2
9
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9

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

2
86. Lưu ý rằng nó có thuộc tính boolean 
2
76, 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

CSS

1
<head>
1
2
<head>
3
3
<head>
5
4
<head>
7
5
2
9
<!DOCTYPE html>
0
4
1
<!DOCTYPE html>
2
4
3
<!DOCTYPE html>
4
<head>
7
<!DOCTYPE html>
6
2
9
<!DOCTYPE html>
8
4
9
2
0
  <meta charset="UTF-8" />
1
2
2
  <meta charset="UTF-8" />
3
2
4
  <meta charset="UTF-8" />
5
2
6
  <meta charset="UTF-8" />
7
2
8
  <meta charset="UTF-8" />
9
<html lang="en">
0
<head>
7
<html lang="en">
2
2
9
<html lang="en">
4
5
5
<html lang="en">
6
5
7
<html lang="en">
8
5
9
3
0
  <title>HTML5 File API</title>
1
3
2
<head>
7
3
4
  <title>HTML5 File API</title>
5
3
6
  <title>HTML5 File API</title>
7
3
8
  <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. PHP

Chú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. php

1
<!DOCTYPE html>
19_______0_______
2
9
3
___
<!DOCTYPE html>
23_______16__________
<!DOCTYPE html>
25
5
11_______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_______11

Hã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 

2
88 tích hợp sẵn để di chuyển nó vào một thư mục 
2
89. Đừ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

Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?

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

Hãy đi sâu vào mã JavaScript để tải tệp lên

1
<!DOCTYPE html>
39_______0_______
<!DOCTYPE html>
41
3
<!DOCTYPE html>
43
4
11_______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.

2
77 là phần tử đầu vào tệp của chúng tôi và
2
91 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 
2
92 rồi kiểm tra xem trình duyệt có hỗ trợ 
2
79. Nếu đúng như vậy, chúng ta sẽ tạo một đối tượng 
2
79 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>
62
3
<!DOCTYPE html>
64
4
11_______66
5
11_______68
<!DOCTYPE html>
0
<!DOCTYPE html>
70
<!DOCTYPE html>
2
<!DOCTYPE html>
72
<!DOCTYPE html>
4
<head>
7

Hà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 

2
95 được kích hoạt trên phần tử đầu vào

1
<!DOCTYPE html>
76
2
<!DOCTYPE html>
78
3
<!DOCTYPE html>
80
4
<!DOCTYPE html>
45
5
<!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>
94
2
0
2
2
<!DOCTYPE html>
97
2
4
<!DOCTYPE html>
99
2
6
2
01
2
8
2
03
<html lang="en">
0
<head>
7

Vì 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à 

2
96. Các tệp mà người dùng đã chọn sẽ có thể truy cập được từ đối tượng 
2
97. Ngay bây giờ, chúng tôi chỉ quan tâm đến thuộc tính 
2
98, 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
2
07_______0_______
2
09
3
___
2
11
4
0_______13
5
0_______15_______11_______0
2
17
<!DOCTYPE html>
2
<head>
7
<!DOCTYPE html>
4
2
21
<!DOCTYPE html>
6
2
23_______11_______8_______15_______7

Chúng tôi kiểm tra xem trình duyệt có hỗ trợ tạo đối tượng 

2
78 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 

2
78. Chúng ta sẽ chuyển đối tượng 
2
86 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 

2
91. Hãy nhớ rằng, nếu trình duyệt hỗ trợ 
2
79, 
2
91 sẽ là đối tượng _______0_______79; . Vì vậy, nếu chúng ta có một đối tượng 
2
79, chúng ta sẽ gọi phương thức 
<html lang="en">
14. Mục đích của một đối tượng 
2
79 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 

2
91. 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
2
21
2
2
29
3
2
31
4
2
33
5
2
35
<!DOCTYPE html>
0
2
37
<!DOCTYPE html>
2
2
39
<!DOCTYPE html>
4
2
41
<!DOCTYPE html>
6
2
43
<!DOCTYPE html>
8
<!DOCTYPE html>
99
2
0
2
47
2
2
<head>
7

Một lần nữa, chúng ta phải đảm bảo rằng chúng ta có 

2
79 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ó 
2
79 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 
2
91 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 
2
92. Chúng tôi cũng đang cài đặt 
<html lang="en">
31 đến 
2
92 để đả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

Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?

Và sau khi họ chọn hình ảnh, họ sẽ thấy điều này

Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?

Và những hình ảnh đã được tải lên

Làm cách nào để gửi video trong AJAX?

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 DropzoneJS

Thư 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
2
53
3
<head>
4
2
57
5
2
59
<!DOCTYPE html>
0
<!DOCTYPE html>
3
<!DOCTYPE html>
2
<!DOCTYPE html>
5
<!DOCTYPE html>
4
2
65
<!DOCTYPE html>
6
2
67
<!DOCTYPE html>
8
2
69
2
0
2
71
2
2
2
7
2
4
3
7

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

Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?

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

Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?
Làm cách nào để gửi video trong AJAX?

Đ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ọc

Tả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

Làm cách nào để gửi video trong AJAX?

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

  • Làm cách nào để gửi video trong AJAX?
    Làm cách nào để gửi video trong AJAX?
    Làm cách nào để gửi video trong AJAX?

    JavaScript cơ bản hiện đại

    Làm cách nào để gửi video trong AJAX?
    Làm cách nào để gửi video trong AJAX?
    Làm cách nào để gửi video trong AJAX?

    Dan Wellman

    12 Thg 12 2019

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
element where added , file element, and a button. .. .
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