Tôi muốn đặt giá trị ban đầu của trường Nhập tệp. Tài liệu tại https. //mdbootstrap. com/docs/standard/forms/file/ cho thấy điều này là có thể
Đầu vào tệp là thứ khó hiểu nhất trong nhóm và yêu cầu JavaScript bổ sung nếu bạn muốn kết nối chúng với chức năng Chọn tệp… và văn bản tên tệp đã chọn
Làm cách nào để đặt giá trị trong thẻ trước khi tải trang?
Nếu tôi sử dụng mã HTML này.
Thẻ này yêu cầu người dùng chọn một tệp từ máy tính cục bộ của mình.
Tôi cần đặt giá trị này trước khi tải trang,
Như bạn thấy, tôi đặt nó thành
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
Nhưng nó không hoạt động,
văn bản trống.
Tôi sai ở đâu?
Cảm ơn bạn
Để đặt giá trị cho đầu vào tệp trong HTML, hãy sử dụng thuộc tính type. Nó xác định nút Duyệt để tải tệp lên bằng trường chọn tệp -
Tuy nhiên, chúng tôi không thể đặt giá trị cụ thể cho đầu vào tệp trong HTML vì lý do bảo mật. Sẽ không có gì xảy ra, ngay cả khi giả sử chúng ta đặt một giá trị như thế này -
Hãy cho chúng tôi xem một số ví dụ để tải lên một tệp và nhiều tệp với tệp loại đầu vào
Chọn tệp chỉ với một tệp
Ví dụ
Điều này cho phép người dùng chỉ tải lên một tệp duy nhất -
Resume
Upload your resume:
Select a file:
đầu ra
Nhấp vào nút Chọn tệp để tải tệp lên -
Chúng tôi sẽ tải lên Sơ yếu lý lịch. tệp docx ở trên
Chọn tệp có nhiều tệp
Ví dụ
Điều này cho phép người dùng tải lên nhiều tệp. Đặt nhiều trong loại đầu vào và nút sẽ hiển thị Chọn tệp cho nhiều tệp –
Resume
Upload your resume:
Select a file:
đầu ra
Chúng tôi nhấp vào Gửi và chọn 3 tệp như hình bên dưới –
Nhấp vào Mở và bây giờ số 3 ở gần nút Chọn tệp i. e. chúng tôi đã tải lên thành công 3 tệp -
Trả về một chuỗi chứa đường dẫn hoặc tên của tệp hoặc các tệp được chọn với đầu vào hiện tại. phần tử tập tin
Thuộc tính giá trị của đầu vào. phần tử tệp là chỉ đọc, vì lý do bảo mật.
Thuộc tính giá trị chứa đường dẫn đầy đủ đến tệp đã chọn trong Internet Explorer, tên của tệp đã chọn có đường dẫn giả trong Opera và tên của tệp đã chọn trong Firefox, Google Chrome và Safari.
Theo mặc định, đầu vào. phần tử tệp chỉ hỗ trợ lựa chọn một tệp, nhưng với thuộc tính nhiều tệp, bạn có thể cho phép người dùng tải lên nhiều tệp với một đầu vào. kiểm soát tệp trong khi gửi biểu mẫu
Not only the value property is suited to retrieve the selected files. With the files property, you can get a FileList collection that contains information about the selected files and provides access to their contents. Unfortunately the files property is not supported by all commonly used browsers.cú pháp
vật. giá trị;
Bạn có thể tìm thấy các đối tượng liên quan trong phần bên dưới
Thuộc tính này là chỉ đọc
Những giá trị khả thi
Chuỗi đại diện cho đường dẫn hoặc tên của tệp hoặc tệp đã chọn
Mặc định. thuộc tính này không có giá trị mặc định
Ví dụ mã HTML 1
Ví dụ này minh họa việc sử dụng thuộc tính NHIỀU HTML và thuộc tính giá trị và tệp JavaScript
Phần tử
4 với
5 cho phép người dùng chọn một hoặc nhiều tệp từ bộ lưu trữ thiết bị của họ. Sau khi được chọn, các tệp có thể được tải lên máy chủ bằng cách gửi biểu mẫu hoặc được thao tác bằng mã JavaScript và API tệpThuộc tính của đầu vào tệp chứa một chuỗi đại diện cho đường dẫn đến [các] tệp đã chọn. Nếu chưa có tệp nào được chọn, giá trị là một chuỗi rỗng [_______67]. Khi người dùng chọn nhiều tệp,
6 đại diện cho tệp đầu tiên trong danh sách các tệp họ đã chọn. Các tập tin khác có thể được xác định bằng cách sử dụngGhi chú. Giá trị là , không phải là đường dẫn thực của tệp. Điều này là để ngăn phần mềm độc hại đoán cấu trúc tệp của người dùng
Ngoài các thuộc tính chung được chia sẻ bởi tất cả các phần tử
4, các đầu vào loại
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
12 cũng hỗ trợ các thuộc tính sauGiá trị thuộc tính
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
13 là một chuỗi xác định loại tệp mà đầu vào tệp sẽ chấp nhận. Chuỗi này là một danh sách được phân tách bằng dấu phẩy của. Bởi vì một loại tệp nhất định có thể được xác định theo nhiều cách, nên sẽ rất hữu ích khi cung cấp một bộ chỉ định loại kỹ lưỡng khi bạn cần các tệp có định dạng nhất địnhChẳng hạn, có một số cách để xác định tệp Microsoft Word, vì vậy một trang web chấp nhận tệp Word có thể sử dụng một
4 như thế này
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
4Giá trị thuộc tính
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
15 là một chuỗi chỉ định máy ảnh nào sẽ được sử dụng để chụp dữ liệu hình ảnh hoặc video, nếu thuộc tính
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
13 cho biết rằng đầu vào phải thuộc một trong các loại đó. Giá trị của
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
17 cho biết nên sử dụng máy ảnh và/hoặc micrô hướng về phía người dùng. Giá trị của
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
18 chỉ định rằng nên sử dụng camera và/hoặc micrô hướng ra ngoài. Nếu thuộc tính này bị thiếu, tác nhân người dùng có thể tự quyết định phải làm gì. Nếu chế độ đối mặt được yêu cầu không khả dụng, tác nhân người dùng có thể quay lại chế độ mặc định ưa thích của nóGhi chú.
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
15 trước đây là một thuộc tính Boolean, nếu có, yêu cầu sử dụng [các] thiết bị ghi phương tiện của thiết bị như máy ảnh hoặc micrô thay vì yêu cầu đầu vào tệpKhi thuộc tính Boolean
00 được chỉ định, đầu vào tệp cho phép người dùng chọn nhiều tệp
Ngoài các thuộc tính được liệt kê ở trên, các thuộc tính không chuẩn sau đây có sẵn trên một số trình duyệt. Bạn nên cố gắng tránh sử dụng chúng khi có thể, vì làm như vậy sẽ hạn chế khả năng mã của bạn hoạt động trong các trình duyệt không triển khai chúng
Thuộc tính Boolean
01, nếu có, cho biết rằng người dùng chỉ có thể chọn các thư mục trong giao diện bộ chọn tệp. Xem
03 để biết thêm chi tiết và ví dụ
Mặc dù ban đầu chỉ được triển khai cho các trình duyệt dựa trên WebKit, nhưng
01 cũng có thể sử dụng được trong Microsoft Edge cũng như Firefox 50 trở lên. Tuy nhiên, mặc dù nó có hỗ trợ tương đối rộng, nhưng nó vẫn không phải là tiêu chuẩn và không nên được sử dụng trừ khi bạn không có giải pháp thay thế nào
Trình xác định loại tệp duy nhất là một chuỗi mô tả loại tệp có thể được người dùng chọn trong phần tử
4 thuộc loại
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
12. Mỗi trình xác định loại tệp duy nhất có thể có một trong các dạng sau- Phần mở rộng tên tệp phân biệt chữ hoa chữ thường hợp lệ, bắt đầu bằng dấu chấm [". "] nhân vật. Ví dụ.
- Chuỗi loại MIME hợp lệ, không có phần mở rộng
- Chuỗi
- Chuỗi
- Chuỗi
Thuộc tính
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
13 lấy một chuỗi chứa một hoặc nhiều chỉ định loại tệp duy nhất này làm giá trị của nó, được phân tách bằng dấu phẩy. Ví dụ: bộ chọn tệp cần nội dung có thể được hiển thị dưới dạng hình ảnh, bao gồm cả định dạng hình ảnh tiêu chuẩn và tệp PDF, có thể trông như thế này
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
10
Điều này tạo ra đầu ra sau
Ghi chú. Bạn cũng có thể tìm thấy ví dụ này trên GitHub — xem mã nguồn và xem nó đang chạy trực tiếp
Bất kể thiết bị hoặc hệ điều hành của người dùng, đầu vào tệp cung cấp một nút mở hộp thoại chọn tệp cho phép người dùng chọn tệp
Bao gồm thuộc tính, như được hiển thị ở trên, chỉ định rằng có thể chọn nhiều tệp cùng một lúc. Người dùng có thể chọn nhiều tệp từ bộ chọn tệp theo bất kỳ cách nào mà nền tảng đã chọn của họ cho phép [e. g. bằng cách giữ phím Shift hoặc Control, rồi bấm]. Nếu bạn chỉ muốn người dùng chọn một tệp duy nhất cho mỗi
4, hãy bỏ qua thuộc tính 00
Các tệp đã chọn' được trả về bởi thuộc tính
9 của phần tử, là đối tượng 98 chứa danh sách các đối tượng
99.
98 hoạt động giống như một mảng, vì vậy bạn có thể kiểm tra thuộc tính
01 của nó để biết số lượng tệp đã chọn
Mỗi đối tượng
99 chứa thông tin sau
03
tên tập tin
04
Một số chỉ định ngày và giờ mà tệp được sửa đổi lần cuối, tính bằng mili giây kể từ kỷ nguyên UNIX [ngày 1 tháng 1 năm 1970 lúc nửa đêm]
05 Không dùng nữa
Đối tượng
06 đại diện cho ngày và giờ mà tệp được sửa đổi lần cuối. Điều này không được chấp nhận và không nên được sử dụng. Sử dụng
04 để thay thế
08
Kích thước của tệp tính bằng byte
09
Loại MIME của tệp
10 Không chuẩnResume
Upload your resume:
Select a file:
Một chuỗi chỉ định đường dẫn của tệp liên quan đến thư mục cơ sở được chọn trong bộ chọn thư mục [nghĩa là bộ chọn
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
12 trong đó thuộc tính được đặt]. Điều này là không chuẩn và nên được sử dụng một cách thận trọngGhi chú. Bạn có thể đặt cũng như nhận giá trị của
9 trong tất cả các trình duyệt hiện đại; Thường thì bạn sẽ không muốn người dùng có thể chọn bất kỳ loại tệp tùy ý nào; . Ví dụ: nếu đầu vào tệp của bạn cho phép người dùng tải lên ảnh hồ sơ, bạn có thể muốn họ chọn các định dạng hình ảnh tương thích với web, chẳng hạn như JPEG hoặc PNG
Các loại tệp được chấp nhận có thể được chỉ định bằng thuộc tính, thuộc tính này có danh sách các phần mở rộng tệp được phép hoặc loại MIME được phân tách bằng dấu phẩy. Vài ví dụ
15 hoặcUpload your resume:
Select a file:
16 — Chấp nhận tệp PNGUpload your resume:
Select a file:
17 hoặcUpload your resume:
Select a file:
18 — Chấp nhận tệp PNG hoặc JPEGUpload your resume:
Select a file:
19 — Chấp nhận bất kỳ tệp nào có loại MIMEUpload your resume:
Select a file:
01 — chấp nhận bất cứ thứ gì có mùi giống như tài liệu MS Word
Hãy xem xét một ví dụ đầy đủ hơn
9
0
Điều này tạo ra một đầu ra trông tương tự như ví dụ trước
Ghi chú. Bạn cũng có thể tìm thấy ví dụ này trên GitHub — xem mã nguồn và xem nó đang chạy trực tiếp
Nó có thể trông giống nhau, nhưng nếu bạn thử chọn một tệp có đầu vào này, bạn sẽ thấy rằng bộ chọn tệp chỉ cho phép bạn chọn các loại tệp được chỉ định trong giá trị
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
13 [giao diện chính xác khác nhau giữa các trình duyệt và hệ điều hành]Thuộc tính
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
13 không xác thực loại tệp đã chọn; . Người dùng vẫn có thể [trong hầu hết các trường hợp] chuyển đổi một tùy chọn trong trình chọn tệp để có thể ghi đè tùy chọn này và chọn bất kỳ tệp nào họ muốn, sau đó chọn loại tệp không chính xácDo đó, bạn nên đảm bảo rằng thuộc tính
value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
13 được sao lưu bằng xác thực phía máy chủ phù hợp- Bạn không thể đặt giá trị của bộ chọn tệp từ tập lệnh — thực hiện thao tác như sau không có tác dụng
1Upload your resume:
Select a file:
- Khi một tệp được chọn bằng cách sử dụng
05, đường dẫn thực tới tệp nguồn không được hiển thị trong thuộc tính
6 của đầu vào vì lý do bảo mật rõ ràng. Thay vào đó, tên tệp được hiển thị, với _____110 được thêm vào trước nó. Có một số lý do lịch sử cho điều này, nhưng nó được hỗ trợ trên tất cả các trình duyệt hiện đại và trên thực tế là
Trong ví dụ này, chúng tôi sẽ trình bày một trình chọn tệp nâng cao hơn một chút, tận dụng thông tin tệp có sẵn trong thuộc tính
9, cũng như trình bày một vài thủ thuật thông minhGhi chú. Bạn có thể xem mã nguồn hoàn chỉnh cho ví dụ này trên GitHub — file-example. html [cũng xem trực tiếp]. Chúng tôi sẽ không giải thích về CSS;
Trước hết, hãy xem HTML
0
2Điều này tương tự như những gì chúng ta đã thấy trước đây — không có gì đặc biệt để bình luận
Tiếp theo, hãy xem qua JavaScript
Trong những dòng đầu tiên của tập lệnh, chúng tôi nhận được các tham chiếu đến chính đầu vào của biểu mẫu và phần tử
09 với lớp
20. Tiếp theo, chúng tôi ẩn phần tử
4 — chúng tôi làm điều này vì đầu vào tệp có xu hướng xấu, khó tạo kiểu và không nhất quán trong thiết kế của chúng trên các trình duyệt. Bạn có thể kích hoạt phần tử
22 bằng cách nhấp vào phần tử
23 của nó, vì vậy tốt hơn là ẩn phần tử
22 một cách trực quan và tạo kiểu cho nhãn giống như một nút, để người dùng biết cách tương tác với phần tử đó nếu họ muốn tải tệp lên
9Ghi chú.
25 được sử dụng để ẩn đầu vào tệp thay vì
26 hoặc
27, vì công nghệ hỗ trợ diễn giải hai kiểu sau có nghĩa là đầu vào tệp không tương tácTiếp theo, chúng tôi thêm một trình lắng nghe sự kiện vào đầu vào để lắng nghe các thay đổi đối với giá trị đã chọn của nó [trong trường hợp này là khi các tệp được chọn]. Trình lắng nghe sự kiện gọi hàm
28 tùy chỉnh của chúng tôi
0Bất cứ khi nào hàm
28 được gọi, chúng tôi- Sử dụng vòng lặp
90 để làm trống nội dung trước đó của bản xem trước
09 - Lấy đối tượng
93 - Kiểm tra xem có tệp nào được chọn không, bằng cách kiểm tra xem
94 có bằng 0 không. Nếu vậy, hãy in một thông báo vào bản xem trước
09 nói rằng không có tệp nào được chọn - Nếu các tệp đã được chọn, chúng tôi lặp qua từng tệp, in thông tin về tệp đó vào bản xem trước
09. Những điều cần lưu ý ở đây - Chúng tôi sử dụng chức năng tùy chỉnh
97 để kiểm tra xem tệp có đúng loại không [e. g. các loại hình ảnh được chỉ định trong thuộc tính
13]value="C:\\WebServers\\Gazeta\\images\\29\\Banner.gif"
- Nếu có, chúng tôi
- In ra tên và kích thước tệp của nó vào một mục danh sách bên trong
09 trước đó [thu được từ
00 và
01]. Hàm
02 tùy chỉnh trả về một phiên bản được định dạng độc đáo của kích thước tính bằng byte/KB/MB [theo mặc định, trình duyệt báo cáo kích thước theo byte tuyệt đối] - Tạo bản xem trước hình thu nhỏ của hình ảnh bằng cách gọi
03. Sau đó, chèn cả hình ảnh vào mục danh sách bằng cách tạo một
04 mới và đặt nó thành hình thu nhỏ
- In ra tên và kích thước tệp của nó vào một mục danh sách bên trong
- Nếu loại tệp không hợp lệ, chúng tôi sẽ hiển thị thông báo bên trong mục danh sách cho người dùng biết rằng họ cần chọn loại tệp khác
1Hàm
97 tùy chỉnh lấy một đối tượng 99 làm tham số, sau đó sử dụng
08 để kiểm tra xem có bất kỳ giá trị nào trong
09 khớp với thuộc tính 09 của tệp không. Nếu tìm thấy khớp, hàm trả về
11. Nếu không tìm thấy kết quả khớp, nó sẽ trả về
12
2Hàm
02 lấy một số [byte, được lấy từ thuộc tính 08 của tệp hiện tại] và biến nó thành một kích thước được định dạng độc đáo theo byte/KB/MB