Làm cách nào để thay đổi tên tệp trong khi tải xuống JavaScript?
|
Tải xuống tệp là một khía cạnh thiết yếu của việc lướt internet. Hàng tấn tệp được tải xuống từ internet mỗi ngày, từ tệp nhị phân (chẳng hạn như ứng dụng, hình ảnh, video và âm thanh) đến tệp văn bản thuần túy Show Nếu bạn có một nhà phát triển web và bạn muốn thêm tính năng này vào ứng dụng của mình, đây là cách bạn có thể thực hiện Chúng tôi sẽ kiểm tra 3 cách tiếp cận khác nhau
Phương pháp đầu tiên và đơn giản nhất ngụ ý tạo một phần tử HTML neo có thuộc tính Theo định nghĩa, thuộc tính Ngoài ra với thuộc tính Nếu giá trị bị bỏ qua, tên tệp gốc được sử dụng Phương pháp này rất tuyệt khi chúng ta không cần thực hiện bất kỳ hành động nào dựa trên quá trình tải xuống này Đồng thời, chúng tôi có thể sử dụng phương pháp này mặc dù chúng tôi không thể hiển thị phần tử HTML neo, sử dụng JavaScript Chức năng trên cũng giống như vậy, chỉ là chúng ta tạo Phần tử HTML neo một cách nhanh chóng, chỉ cho hành động tải xuống này và sau đó chúng ta xóa nó
Hạn chế của phương pháp này là nó phải tôn trọng chính sách cùng nguồn gốc, do đó thuộc tính này hoạt động bình thường đối với các URL có cùng nguồn gốc Một tình huống phổ biến là khi bạn muốn tải xuống một hình ảnh từ một máy chủ khác và thay vì tải xuống, trình duyệt sẽ mở nó trong một tab mới Khía cạnh quan trọng của phương pháp này là quá trình tải xuống sẽ tự động bắt đầu và có thể được xem nguyên bản trong trình duyệt Lưu ý trong hình trên cách quá trình tải xuống được gửi tới trình duyệt để quản lý nó và trình duyệt cung cấp quyền kiểm soát và hiển thị tiến trình Phương pháp IIPhương thức thứ hai và phương thức thứ ba sử dụng cùng một kỹ thuật với phần tử neo, nhưng thay vì cung cấp URL hình ảnh, chúng tôi chuyển đổi nội dung của tệp thành Blob và sau đó chúng tôi tạo DOMString từ nó bằng phương thức createObjectURL Lưu ý rằng ở phần cuối, chúng tôi đã sử dụng Bất cứ khi nào một URL đối tượng được tạo, nó sẽ tồn tại trong suốt thời gian tồn tại của tài liệu mà nó được tạo. Trình duyệt sẽ giải phóng tất cả các URL đối tượng khi tài liệu đang được dỡ xuống. Tuy nhiên, điều quan trọng là bạn giải phóng các URL đối tượng bất cứ khi nào chúng không còn cần thiết để cải thiện hiệu suất và giảm thiểu việc sử dụng bộ nhớ Khía cạnh quan trọng của phương pháp này là quá trình tải xuống sẽ tự động bắt đầu, nhưng trong ứng dụng của chúng tôi và sẽ chỉ được chuyển đến trình duyệt khi quá trình tải xuống hoàn tất Lưu ý trong GIF ở trên rằng khi chúng tôi nhấp vào nút Tải xuống, dường như không có gì xảy ra vì quá trình tải xuống diễn ra như một tác vụ không đồng bộ trong ứng dụng của chúng tôi và sau khi hoàn tất, nó sẽ được chuyển đến trình duyệt Khi cửa sổ trình duyệt đó xuất hiện và chúng tôi nhấp vào lưu, tệp sẽ tự động được lưu trên máy tính của chúng tôi Với phương pháp này, giờ đây chúng tôi có thể tải xuống bất kỳ loại tệp nào bất kể máy chủ gốc. Tuy nhiên, vấn đề là do quá trình tải xuống diễn ra bên trong ứng dụng của chúng tôi, người dùng có thể nghĩ rằng không có gì xảy ra khi anh ấy nhấp vào và do đó chúng tôi phải quản lý việc tải xuống tệp lớn bằng cách triển khai đo lường tiến trình Đồng thời, phương pháp này rất hữu ích khi chúng ta cần thực hiện một số hành động nhất định bên trong ứng dụng của mình sau khi tệp đã tải xuống xong. Hiển thị thông báo, gửi yêu cầu đến back-end hiển thị trang mới, v.v. Phương pháp IIIPhương thức thứ ba tương tự như phương thức thứ hai, chúng ta vẫn sẽ sử dụng Blob và createObjectURL, nhưng thay vì sử dụng Fetch API, chúng ta sẽ sử dụng XMLHttpRequest Chúng tôi đang sử dụng XMLHttpRequest thay vì Tìm nạp vì tại thời điểm nói API Tìm nạp không cung cấp giao diện để đo lường tiến độ, trong khi XMLHttpRequest thì có Khối đầu và khối Bên trong_______9_______, chúng tôi sử dụng các giá trị Lưu ý trong GIF ở trên rằng chúng tôi có hành vi tương tự như đối với phương pháp thứ hai, chỉ bây giờ chúng tôi mới có thể theo dõi tiến trình. Sau khi tệp được tải xuống hoàn toàn, tệp sẽ được gửi đến trình duyệt và sau đó tệp sẽ được lưu ngay lập tức vào đĩa Gói (lạiMỗi phương pháp trên đại diện cho một bản cập nhật so với phương pháp trước đó Phương pháp đầu tiên là dễ nhất. Trong trường hợp này, chúng tôi chỉ cần chuyển tiếp quá trình tải xuống tới trình duyệt để quản lý nó một cách tự nhiên. Phương pháp này là cách ưa thích khi ứng dụng không phải thực hiện một số hành động nhất định dựa trên trạng thái tải Trong lần thứ hai, chúng tôi quản lý nội bộ tải xuống và chỉ gửi nó tới trình duyệt khi quá trình tải xuống hoàn tất. Bằng cách này, chúng tôi có thể kiểm soát quá trình tải xuống bên trong ứng dụng và chúng tôi có thể phản ứng tùy thuộc vào trạng thái của nó. Phương pháp này hoạt động tốt đối với các tệp nhỏ được tải xuống nhanh chóng, nhưng khi tệp quá lớn, người dùng có thể nghĩ rằng ứng dụng bị lỗi, nếu không có gì xảy ra trên giao diện người dùng để cho người dùng biết rằng quá trình tải xuống đang diễn ra Trong phương pháp cuối cùng, chúng tôi thực hiện phép đo tiến trình của riêng mình, tương tự như trong trình duyệt Làm cách nào để thay đổi tên tệp khi tải xuống trong Javascript?bạn có thể bật tùy chọn đường dẫn tải xuống khác trong trình duyệt của mình. Sau đó, bạn có thể đổi tên tệp bằng hoạt động nhập dữ liệu để nhập đường dẫn có tên tệp mới trong quá trình thực thi .
Làm cách nào để thay đổi tên tệp JavaScript?Để đổi tên tệp, chúng tôi phải tạo tệp mới và chuyển tên mới của chúng tôi cho Trình tạo tệp . const myRenamedFile = new File([myFile], 'my-file-Final-1-really. txt'); . nhật ký (myRenamedFile); . Tệp {tên. "my-file-cuối cùng-1-thực sự.
Làm cách nào để tải xuống tệp bằng JavaScript?Vậy các bước tải file sẽ là. . Sử dụng API tìm nạp để tải xuống tệp tập lệnh Chuyển đổi dữ liệu thành loại blob Chuyển đổi đối tượng blob thành chuỗi bằng cách sử dụng URL. tạoObjectURL() Create an element to download the string.. Làm cách nào để lấy tên tệp đã tải lên trong JavaScript?Giải thích . var url = cửa sổ. vị trí. tên đường dẫn; tên tệp var = url. chuỗi con (url. lastIndexOf('/')+1); var url = cửa sổ. vị trí. tên đường dẫn; . chuỗi con (url. lastIndexOf('/')+1); |
