 Show Andrei Buntsev Làm theo 14 Tháng Sáu, 2020 · 1 phút đọc Tải lên các đoạn video có bản xem trước và thanh tiến trình bằng JavaScript Vì vậy, chúng tôi có 3 mục tiêu sau đây
Tất cả các tác vụ này đều có thể thực hiện được với JS và jQuery mà không cần bất kỳ thư viện nào khác Vì vậy, để truy cập tệp đã chọn, chúng tôi sẽ gọi Để hiển thị video, chúng tôi cần một phần tử video Đoạn mã sau hiển thị video sau khi được chọn trong thành phần video để xem trước Như bạn có thể thấy, bạn có thể xem bất kỳ tệp video nào có tất cả các điều khiển cần thiết trong trình phát video. Bây giờ hãy xem cách tải video lên máy chủ của bạn Nó thực hiện nghĩa đen như sau
Nhưng thật không may, chúng tôi không thể sử dụng lệnh gọi AJAX giả ở đây, vì vậy hãy triển khai một phương thức sơ khai nó 'gửi' khối cứ sau 250 mili giây và cập nhật chiều rộng của nó trong khi gửi khối Bạn có thể thử ví dụ hoàn chỉnh trong JSFiddle https. //jsfiddle. mạng/AndrewBuntsev/47dx86sr/ Cloudinary cung cấp API để tải hình ảnh, video và bất kỳ loại tệp nào khác lên đám mây. Các tệp được tải lên Cloudinary được lưu trữ an toàn trên đám mây với lịch sử sửa đổi và sao lưu an toàn. API của Cloudinary cho phép tải lên an toàn từ máy chủ của bạn, trực tiếp từ trình duyệt hoặc ứng dụng dành cho thiết bị di động của khách truy cập hoặc được tìm nạp qua các URL công khai từ xa Nút của Cloudinary. js SDK bao bọc API tải lên của Cloudinary và đơn giản hóa việc tích hợp. Nút. js có sẵn để dễ dàng thực hiện Node. js tải hình ảnh và video lên đám mây và Node. js có sẵn để tải trực tiếp từ trình duyệt lên Cloudinary Trang này bao gồm các mẫu sử dụng phổ biến cho Node. tải lên hình ảnh và video js với Cloudinary Để biết chi tiết về tất cả các tùy chọn và tham số tải lên có sẵn, hãy xem tài liệu Tải lên phương tiện và phương pháp Tham khảo API tải lên Tiện ích Tải lên của Cloudinary cung cấp giải pháp thay thế cho việc sử dụng SDK Cloudinary để thêm chức năng tải lên vào ứng dụng của bạn, loại bỏ nhu cầu phát triển khả năng tải lên tương tác nội bộ. Tiện ích tải lên là một giao diện người dùng tương tác, giàu tính năng, dễ tích hợp cho phép bạn thêm hỗ trợ tải lên trên nền tảng đám mây vào trang web của mình. Có thể dễ dàng nhúng tiện ích vào ứng dụng web của bạn chỉ bằng một vài dòng mã JavaScript. Xem tài liệu về tiện ích tải lên để biết thông tin chi tiết Bạn có thể tải hình ảnh, video hoặc bất kỳ tệp thô nào khác lên Cloudinary từ Nút của mình. mã js. Quá trình tải lên được thực hiện qua HTTPS bằng giao thức bảo mật dựa trên thông số Xem bản trình diễn này về cách tải nhanh hình ảnh, video và các tệp phương tiện khác lên Cloudinary để có thể gửi ngay lập tức bằng cách sử dụng API tải lên của Cloudinary trong môi trường phát triển của bạn Nút sau. js tải hình ảnh lên đám mây function upload(file, options).then(callback) Ví dụ: tải lên tệp hình ảnh cục bộ có tên 'my_image. jpg' cloudinary.v2.uploader
.upload("/home/my_image.jpg")
.then(result=>console.log(result));Tệp cần tải lên có thể được chỉ định dưới dạng đường dẫn cục bộ, URL HTTP hoặc HTTPS từ xa, URL bộ chứa lưu trữ trong danh sách trắng (S3 hoặc Google Storage), URI dữ liệu base64 hoặc URL FTP. Để biết chi tiết, xem Để biết chi tiết về tất cả các tùy chọn và tham số tải lên có sẵn, hãy xem tài liệu Tải lên phương tiện và phương pháp Tham khảo API tải lên Bạn tải lên video giống hệt như hình ảnh. Tuy nhiên, phương pháp Phương thức cloudinary.v2.uploader
.upload("/home/my_image.jpg")
.then(result=>console.log(result));0 (20 MB mặc định)Ví dụ sau tải cloudinary.v2.uploader
.upload("/home/my_image.jpg")
.then(result=>console.log(result));1 lên Cloudinary và lưu trữ nó trong cấu trúc thư mục hai cấp với ID công khai cloudinary.v2.uploader
.upload("/home/my_image.jpg")
.then(result=>console.log(result));2. Nó cũng thực hiện hai phép biến đổi háo hức thay đổi kích thước video thành hình vuông và hình chữ nhật nhỏcloudinary.v2.uploader
.upload("dog.mp4",
{ resource_type: "video",
public_id: "myfolder/mysubfolder/dog_closeup",
chunk_size: 6000000,
eager: [
{ width: 300, height: 300, crop: "pad", audio_codec: "none" },
{ width: 160, height: 100, crop: "crop", gravity: "south", audio_codec: "none" } ],
eager_async: true,
eager_notification_url: "https://mysite.example.com/notify_endpoint" })
.then(result=>console.log(result));Theo mặc định, quá trình tải lên được thực hiện đồng bộ. Sau khi hoàn tất, hình ảnh hoặc video đã tải lên có sẵn ngay lập tức để chuyển đổi và phân phối. Lệnh gọi tải lên trả về một Hash có nội dung tương tự như sau {
public_id: 'cr4mxeqx5zb8rlakpfkg',
version: 1571218330,
signature: '63bfbca643baa9c86b7d2921d776628ac83a1b6e',
width: 864,
height: 576,
format: 'jpg',
resource_type: 'image',
created_at: '2017-06-26T19:46:03Z',
bytes: 120253,
type: 'upload',
url: 'http://res.cloudinary.com/demo/image/upload/v1571218330/cr4mxeqx5zb8rlakpfkg.jpg',
secure_url: 'https://res.cloudinary.com/demo/image/upload/v1571218330/cr4mxeqx5zb8rlakpfkg.jpg'
}Phản hồi bao gồm các URL HTTP và HTTPS để truy cập nội dung phương tiện đã tải lên cũng như thông tin bổ sung về nội dung đã tải lên. ID công khai, loại tài nguyên, chiều rộng và chiều cao, định dạng tệp, kích thước tệp theo byte, chữ ký để xác minh phản hồi, v.v.
Mẫu tải lên được đề cập ở trên cho phép Nút phía máy chủ của bạn. js để tải nội dung phương tiện lên Cloudinary. Trong quy trình này, nếu bạn có một biểu mẫu web cho phép người dùng của bạn tải lên hình ảnh hoặc video, dữ liệu của tệp phương tiện trước tiên sẽ được gửi đến máy chủ của bạn và chỉ sau đó mới được tải lên Cloudinary Một tùy chọn mạnh mẽ và hiệu quả hơn là cho phép người dùng của bạn tải hình ảnh và video trong mã phía máy khách của bạn trực tiếp từ trình duyệt lên Cloudinary thay vì đi qua máy chủ của bạn. Phương pháp này cho phép tải lên nhanh hơn và trải nghiệm người dùng tốt hơn. Nó cũng giảm tải từ máy chủ của bạn và giảm độ phức tạp của Nút của bạn. ứng dụng js Bạn có thể tải lên trực tiếp từ trình duyệt bằng lệnh gọi có dấu hoặc chưa dấu tới điểm cuối tải lên, như minh họa trong ví dụ Đối với các bản tải lên đã ký từ mã phía máy khách của bạn, mã phải được tạo trong Nút phía máy chủ của bạn. mã js. Bạn có thể sử dụng phương pháp cloudinary.v2.uploader
.upload("/home/my_image.jpg")
.then(result=>console.log(result));3 để
Làm cách nào để tải video lên bằng JavaScript?Tải lên & Hiển thị Hình ảnh, Âm thanh và Video trên Web bằng. . Bước 1. Tạo biểu mẫu. . Bước 2. Lấy giá trị và tệp từ đầu vào. . Bước 3. Chuyển đối tượng tệp thành URL. . Bước 4. Lấy URL và cung cấp chúng cho các phần tử DOM. . Bước 5. Thiết lập EventListener cho Nút Làm cách nào để tải tệp lên máy chủ JavaScript?Tải một tệp lên . Người dùng chọn một tập tin trong trình duyệt Người dùng nhấp vào nút tải lên Các tệp đã tải lên được đặt trong thư mục uploadFiles của máy chủ Sau đó, máy chủ trả về một URL, là địa chỉ của tệp đã tải lên Người dùng có thể truy cập tài nguyên thông qua URL này Làm cách nào để tải lên tệp video trong nút js?Nút. js Tải tệp lên . Bước 1. Tạo biểu mẫu tải lên. Tạo một nút. js viết biểu mẫu HTML, với trường tải lên. . Bước 2. Phân tích tệp đã tải lên. Bao gồm mô-đun Formidable để có thể phân tích cú pháp tệp đã tải lên sau khi tệp đến máy chủ. . Bước 3. Lưu các tập tin Làm cách nào để tải tệp lên bằng JavaScript?Logic tải tệp JavaScript lên . Tạo đối tượng FormData để chứa thông tin gửi đến máy chủ; Thêm tệp đã chọn sẽ được tải lên đối tượng FormData; Gọi tài nguyên phía máy chủ không đồng bộ để xử lý tải lên; |
