Hướng dẫn kỹ lưỡng này là nơi tốt nhất để tìm hiểu mọi thứ bạn cần để tải lên thành công hình ảnh trong tài liệu HTML, vì vậy hãy để chúng tôi tìm hiểu chi tiết
nội dung
- Cách tải tệp lên trong tài liệu HTML. Cú pháp cơ bản
- – Chức năng tải lên tệp HTML. Một ví dụ cơ bản
- – Tạo kiểu cho các phần tử của ví dụ bằng CSS
- Bao gồm Thuộc tính Giá trị trong Cú pháp Tải lên Tệp HTML của Bạn
- Thuộc tính bổ sung bạn có thể sử dụng
- – Nhìn vào thuộc tính chấp nhận tệp
- – Nhìn vào tập tin nhiều thuộc tính
- – Nhìn vào thuộc tính File Capture
- Trình xác định loại tệp duy nhất cho chức năng tải lên tệp HTML
- – Công cụ xác định loại tệp duy nhất. Nhìn vào cú pháp đầy đủ
- Tạo một cú pháp hoàn chỉnh
- – Thêm cú pháp HTML
- – Thêm cú pháp CSS
- – Thêm cú pháp JavaScript
- Bản tóm tắt
Cách tải tệp lên trong tài liệu HTML. Cú pháp cơ bản
Tải lên tệp trong tài liệu HTML được thực hiện dễ dàng bằng cách sử dụng phần tử đầu vào HTML và bao gồm thuộc tính loại có giá trị cụ thể. Điều này tạo ra biểu mẫu HTML cơ bản tải lên nhưng bạn phải bao gồm các cú pháp CSS và JavaScript cụ thể để viết giao diện người dùng đầy đủ chức năng cho trang web của bạn. Giá trị của thuộc tính loại phải được đặt thành "tệp", nó sẽ cho trình duyệt của bạn biết chức năng của phần tử HTML cụ thể đó là gì
Tuy nhiên, cú pháp HTML có thể vẫn khá đơn giản. Bạn không cần một số lượng lớn các phần tử và thuộc tính HTML, nhưng các chuyên gia luôn khuyên bạn nên đưa cú pháp của mình lên một tầm cao mới. Giá trị tệp bên trong thuộc tính loại cho phép người dùng chọn một hoặc nhiều tệp từ thiết bị của họ và tải chúng lên bằng cách gửi biểu mẫu cụ thể. Bạn có thể thao tác thêm cú pháp và các hàm của nó bằng cách sử dụng các hàm JavaScript cụ thể
– Chức năng tải lên tệp HTML. Một ví dụ cơ bản
Trong phần này của bài viết, chúng tôi sẽ cung cấp cho bạn một ví dụ tải lên tệp HTML đơn giản. Ví dụ này sẽ là điểm khởi đầu của chúng tôi cho mọi thứ khác mà chúng tôi sẽ giải thích và minh họa trong các phần sau của hướng dẫn
Vì bạn phải bao gồm thuộc tính loại tải lên trong phần tử đầu vào HTML, nên bạn nên bao gồm phần tử nhãn HTML. Phần tử này được sử dụng để cho người dùng biết giao diện cụ thể được sử dụng để làm gì
Chúng ta hãy quan sát ví dụ sau
Choose your profile picture:Ví dụ này là cú pháp hoàn hảo để giải thích cặn kẽ chức năng của thuộc tính chấp nhận. Bạn có thể xác định các tệp Microsoft Word theo nhiều cách, do đó, một trang web chấp nhận các tài liệu này sẽ chứa cú pháp như vậy. Các cách khác nhau để xác định tệp được liệt kê dưới dạng giá trị của thuộc tính chấp nhận. Điều này sẽ giúp trình duyệt hiểu các loại khác nhau và cung cấp trải nghiệm người dùng mượt mà
– Nhìn vào tập tin nhiều thuộc tính
Cái hay khi làm việc với các tài liệu HTML là bạn có thể đạt được cùng một mục tiêu theo những cách khác nhau. Điều tương tự cũng có thể xảy ra bất cứ khi nào bạn đang cố gắng làm cho cú pháp của mình có khả năng quản lý quá trình tải lên của nhiều tệp. "Nhiều" đại diện cho một thuộc tính Boolean và sau khi được chỉ định, nó sẽ cho phép người dùng trên trang web cụ thể tải lên nhiều tệp. Đó là một giải pháp đơn giản để cho trình duyệt của bạn biết rằng người dùng có thể sử dụng chức năng tải lên tệp HTML cho nhiều tệp
– Nhìn vào thuộc tính File Capture
Đôi khi thuộc tính chấp nhận được sử dụng để chỉ ra rằng đầu vào sẽ khởi tạo dữ liệu máy ảnh hoặc video. Trong trường hợp này, bạn nên sử dụng thuộc tính chụp HTML để chỉ định máy ảnh nào mà trình duyệt sẽ sử dụng cho chức năng cụ thể đó. Hơn nữa, thuộc tính này có thể có hai giá trị là
- người sử dụng
- Môi trường
Nếu bạn sử dụng giá trị người dùng cho thuộc tính chụp của mình, bạn yêu cầu trình duyệt của mình chỉ ra rằng máy ảnh và/hoặc micrô phía trước sẽ được khởi chạy. Mặt khác, việc sử dụng giá trị môi trường cho phép trình duyệt của bạn chỉ định rằng máy ảnh phía sau và/hoặc micrô sẽ được khởi chạy
Đây không phải là thuộc tính bắt buộc và bạn không cần phải đưa nó vào cú pháp HTML của mình. Trong trường hợp này, người dùng được tự do quyết định chọn tùy chọn máy ảnh và/hoặc micrô nào. Tuy nhiên, bạn cần lưu ý rằng trừ khi chế độ được yêu cầu không khả dụng, trình duyệt sẽ bắt đầu chế độ mặc định. Thật thú vị, ảnh chụp đã từng là một thuộc tính Boolean được sử dụng để yêu cầu sử dụng thiết bị chụp ảnh
Trình xác định loại tệp duy nhất cho chức năng tải lên tệp HTML
Như đã đề cập trước đây, các chỉ định loại tệp duy nhất được sử dụng để mô tả loại tệp mà người dùng có thể chọn để tải lên. Những bộ xác định duy nhất này có thể có một số dạng và chúng là
- Sử dụng phần mở rộng tên tệp cụ thể, luôn bắt đầu bằng ký tự dấu chấm. Một số phần mở rộng phổ biến nhất là. jpg,. tài liệu, hoặc. pdf
- Không bao gồm tiện ích mở rộng nào có chuỗi loại MIME hợp lệ
- Sử dụng chuỗi âm thanh/* đề cập đến bất kỳ tệp âm thanh nào
- Sử dụng chuỗi hình ảnh/* đề cập đến bất kỳ tệp hình ảnh nào
- Sử dụng chuỗi video/* đề cập đến bất kỳ tệp video nào
Bạn phải bao gồm các bộ xác định này trong thuộc tính chấp nhận bên trong thẻ đầu vào HTML và cần sử dụng dấu phẩy để phân tách các bộ xác định loại tệp nếu bạn bao gồm nhiều hơn một giá trị. Hơn nữa, chúng tôi sẽ cung cấp cho bạn một ví dụ để làm rõ cú pháp
Vui lòng quan sát cú pháp HTML sau
Cú pháp HTML này sẽ yêu cầu trình duyệt của bạn chấp nhận mọi tệp video do người dùng tải lên, nhưng cũng chấp nhận mọi tệp pdf. Bạn có thể tiếp tục chuỗi bằng cách thêm các giá trị khác nhưng chúng tôi đã cố gắng giữ cho phần tử này đơn giản và đầy đủ chức năng. Tuy nhiên, chúng tôi sẽ cho bạn xem một ví dụ hoàn chỉnh chứa các phần tử HTML khác
– Công cụ xác định loại tệp duy nhất. Nhìn vào cú pháp đầy đủ
Cách tốt nhất để hiểu chức năng và cách sử dụng một phần tử hoặc thuộc tính HTML cụ thể là sử dụng một cú pháp hoàn chỉnh. Trong ví dụ sau, chúng tôi sẽ sử dụng các phần tử HTML khác sẽ tạo giao diện mà người dùng có thể điều hướng và tải lên các tệp cụ thể. Bạn phải bao gồm thuộc tính chấp nhận với giá trị của nó bên trong phần tử đầu vào HTML
Vui lòng xem qua cú pháp tải lên tệp HTML sau
Choose file to upload
Submit here
Thuộc tính chấp nhận chứa ba chỉ định duy nhất. Bạn có thể tạo kiểu thêm cho ví dụ tải lên tệp HTML này bằng cách bao gồm các thuộc tính tạo kiểu CSS cụ thể
Tạo một cú pháp hoàn chỉnh
Ở phần đầu của bài viết này, chúng tôi đã nói rằng việc tạo một quy trình tải tệp lên đầy đủ chức năng yêu cầu sử dụng các cú pháp khác nhau. Trong bước đầu tiên, bạn phải tạo tài liệu HTML. Sau đó, bạn có thể bao gồm các thuộc tính CSS cụ thể nhưng bước này là tùy chọn. Cuối cùng, việc thêm cú pháp JavaScript sẽ hoàn tất quy trình tải lên và làm cho nó thân thiện với người dùng. Trong phần này của hướng dẫn, chúng tôi sẽ cung cấp các ví dụ kỹ lưỡng cho cả ba bước để bạn có thể thấy toàn bộ quá trình đang hoạt động
– Thêm cú pháp HTML
Không có trang web nào có thể hoạt động bình thường nếu không có cú pháp HTML hoàn chỉnh. Điều tương tự cũng có thể xảy ra đối với quá trình tạo chức năng tải lên tệp HTML. Bạn phải lồng phần tử đầu vào HTML bên trong phần tử biểu mẫu HTML. Ngoài ra, bạn sẽ tạo một vài phần tử div HTML để bạn có thể giữ cho toàn bộ tài liệu được sắp xếp và dễ hiểu
Ví dụ này cho thấy rõ ràng nó được thực hiện như thế nào
Choose any image to upload [PNG, JPG]
No files are currently selected for upload
Click here to submit
Khi bạn kết hợp cú pháp HTML này với các thành phần khác trên trang web của mình, bạn sẽ có một cú pháp hoàn chỉnh có tất cả các thành phần và chức năng cần thiết
– Thêm cú pháp CSS
Một bước quan trọng khác, mặc dù là tùy chọn, là thêm các thuộc tính tạo kiểu CSS sẽ thay đổi trực quan đầu ra của trang web của bạn. Đây là cách tốt nhất để làm như vậy vì bạn có thể bao gồm nhiều kiểu khác nhau, thay đổi màu sắc, phông chữ, hình thức và lề. Một lần nữa, bạn có thể bao gồm các thuộc tính này trong cùng một tài liệu HTML nhưng chúng tôi khuyên bạn không nên làm như vậy
Chúng ta hãy xem xét kỹ hơn ví dụ sau
.Myclass + Label {Cỡ chữ. 3em;
Trọng lượng phông chữ. 900;
Màu. cam;
Màu nền. tím;
Bán kính đường viền. 15px;
Hiển thị. Chặn nội tuyến;
}
. Lớp học của tôi. Tiêu điểm + Nhãn,
. Myclass + Nhãn. Di chuột {
Màu nền. màu đỏ;
}
Đầu ra trực quan của trang web của bạn sẽ được thay đổi dựa trên các giá trị của thuộc tính CSS. Một chức năng phổ biến khác mà bạn có thể tạo bằng cú pháp CSS là ẩn nút gửi. Bạn chỉ cần ba thuộc tính để làm như vậy và chúng tôi sẽ chỉ cho bạn cách
Vui lòng quan sát ví dụ CSS sau
độ mờ. 0;z-index. -1;
vị trí. tuyệt đối;
Những thuộc tính này là tất cả những gì cần thiết để ẩn nút tải lên tệp HTML của bạn, trong trường hợp bạn muốn. Cuối cùng, chúng ta hãy xem bước cuối cùng mà bạn sẽ thêm các hàm JavaScript
– Thêm cú pháp JavaScript
Đây là bước cần chú ý nhiều nhất vì cú pháp có thể khá phức tạp. Các chức năng bạn sẽ bao gồm sẽ phụ thuộc vào nhu cầu và yêu cầu của bạn. Trong ví dụ này, chúng tôi sẽ bao gồm một số chức năng để bạn có thể chọn chức năng nào bạn cần nhất
Chúng ta hãy quan sát cú pháp JavaScript sau
function updateImageDisplay[] {while[preview. firstChild] {
xem trước. removeChild[xem trước. firstChild];
}
const curFiles = input. tập tin;
if[curFiles. chiều dài === 0] {
const para = tài liệu. createElement[‘p’];
para. textContent = ‘Hiện không có tệp nào được chọn để tải lên’;
xem trước. appendChild[para];
} other {
const list = document. createElement[‘ol’];
xem trước. appendChild[list];
for[const file của curFiles] {
const listItem = document. createElement[‘li’];
const para = document. createElement[‘p’];
if[validFileType[file]] {
para. textContent = `Tên tệp ${tệp. tên}, kích thước tệp ${returnFileSize[tệp. kích thước]}. `;
const image = document. createElement[‘img’];
hình ảnh. src = địa chỉ. createObjectURL[tệp];
listItem. appendChild[hình ảnh];
listItem. appendChild[para];
} other {
para. textContent = `Tên tệp ${tệp. Tên}. Không phải là loại tệp hợp lệ. Cập nhật lựa chọn của bạn. `;
listItem. appendChild[para];
}
danh sách. appendChild[listItem];
}
}
}
Như bạn có thể thấy, ví dụ này là cú pháp JavaScript hoàn chỉnh để bạn có thể sử dụng lại nó trong tài liệu HTML tiếp theo của mình. Các hàm JavaScript phải luôn được viết trên một tài liệu riêng
Bản tóm tắt
Chức năng tải lên tệp HTML cho phép người dùng tương tác với một trang web cụ thể và tải lên nhiều loại dữ liệu đầu vào. Hướng dẫn kỹ lưỡng của chúng tôi đã cung cấp cho bạn nhiều ví dụ nhưng nó cũng đã giải thích được những điểm quan trọng sau
- Một số lượng lớn các trang web có chức năng tải tệp lên theo cú pháp HTML của chúng
- Cú pháp HTML không cần phải phức tạp
- Bạn bao gồm thuộc tính loại trong phần tử đầu vào HTML
- Thuộc tính loại được cho là được gán với một giá trị tệp
- Bạn có thể tạo kiểu cho các phần tử bằng các thuộc tính CSS cụ thể
- Có một số thuộc tính phổ biến bạn sử dụng trong cú pháp này
- Trình xác định loại tệp duy nhất mô tả loại tệp đủ điều kiện để tải lên
- Cú pháp tải lên tệp hoàn chỉnh bao gồm ba bước
5/5 - [16 phiếu]
- Tác giả
- Bài viết gần đây
Vị trí là tất cả
Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL